Update span tag value with JQuery

Question

I m trying to update a span tag that is in a fieldset tag that is in a legend tag   The idea is to update the cost of a Software Item as components are selected   The code below works fine if I only have one software item  e g  - Visual Studio 2008 Pro  2800   but if I add a second item in another fieldset  then when I try to update the span for that fieldset  it updates the span for the fieldset containing my Visual Studio Software   Any ideas what I m doing wrong    lt script language  javascript  type  text javascript  gt    document  ready function            li   click function                        var itemCost   0             legend   each function                 var SoftwareItem     this  text                itemCost   GetItemCost SoftwareItem                  input checked   each function                                    var Component     this  next  label   text                    itemCost    GetItemCost Component                                               ItemCostSpan   text  Item Cost         itemCost                       function GetItemCost text                var start   0              start   text lastIndexOf                   var textCost   text substring start   1               var itemCost   parseFloat textCost               return itemCost                                 lt  script gt    lt head runat  server  gt   lt title gt  lt  title gt   lt  head gt   lt body gt   lt form id  form1  runat  server  gt   lt fieldset gt      lt legend gt Visual Studio 2008 Pro    2800 lt  legend gt        lt ul class  AspNet-CheckBoxList-RepeatDirection-Vertical  gt           lt li class  AspNet-CheckBoxList-Item  gt               lt input id  CheckBoxList1 0  type  checkbox    name  CheckBoxList1 0  value  first1    gt               lt label for  CheckBoxList1 0  gt Software Assurance  300 00 lt  label gt           lt  li gt           lt li class  AspNet-CheckBoxList-Item  gt               lt input id  CheckBoxList1 1  type  checkbox  name  CheckBoxList1 1  value  second2    gt               lt label for  CheckBoxList1 1  gt Another Component  255 25 lt  label gt           lt  li gt               lt li class  AspNet-CheckBoxList-Item  gt               lt input id  CheckBox1  type  checkbox  name  CheckBoxList1 1  value  second2    gt               lt label for  CheckBoxList1 1  gt A Second Component  15 25 lt  label gt           lt  li gt       lt  ul gt       lt span id  ItemCostSpan  style  background-color White  gt           lt  span gt                lt  fieldset gt       lt fieldset gt      lt legend gt Visio 2008 Pro    415 lt  legend gt        lt ul class  AspNet-CheckBoxList-RepeatDirection-Vertical  gt           lt li class  AspNet-CheckBoxList-Item  gt               lt input id  CheckBox2  type  checkbox  name  CheckBoxList1 0  value  first1    gt               lt label for  CheckBoxList1 0  gt Software Assurance  40 00 lt  label gt           lt  li gt           lt li class  AspNet-CheckBoxList-Item  gt               lt input id  CheckBox3  type  checkbox  name  CheckBoxList1 1  value  second2    gt               lt label for  CheckBoxList1 1  gt Another Component  25 55 lt  label gt           lt  li gt               lt li class  AspNet-CheckBoxList-Item  gt               lt input id  CheckBox4  type  checkbox  name  CheckBoxList1 1  value  second2    gt               lt label for  CheckBoxList1 1  gt A Second Component  10 25 lt  label gt           lt  li gt           lt  ul gt               lt span id  ItemCostSpan  style  background-color White  gt  lt  span gt             lt  fieldset gt        lt span id  TotalCostSpan  style  background-color White  gt  lt  span gt        lt  form gt

User · Accepted Answer

Tag ids must be unique   You are updating the span with ID  ItemCostSpan  of which there are two   Give the span a class and get it using find          legend   each function             var SoftwareItem     this  text            itemCost   GetItemCost SoftwareItem              input checked   each function                                var Component     this  next  label   text                itemCost    GetItemCost Component                                     this  find   ItemCostSpan   text  Item Cost         itemCost

[jquery] Update span tag value with JQuery

Examples related to jquery

Examples related to html