Update span tag value with JQuery

html, jquery

Solution

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);
    });

Problem

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? ``` <script language="javascript" type="text/javascript"> $(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; } }); }); </script> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <fieldset> <legend>Visual Studio 2008 Pro $2800</legend> <ul class="AspNet-CheckBoxList-RepeatDirection-Vertical"> <li class="AspNet-CheckBoxList-Item"> <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="first1" /> <label for="CheckBoxList1_0">Software Assurance $300.00</label> </li> <li class="AspNet-CheckBoxList-Item"> <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="second2" /> <label for="CheckBoxList1_1">Another Component $255.25</label> </li> <li class="AspNet-CheckBoxList-Item"> <input id="CheckBox1" type="checkbox" name="CheckBoxList1$1" value="second2" /> <label for="CheckBoxList1_1">A Second Component $15.25</label> </li> </ul> <span id="ItemCostSpan" style="background-color:White"> </span> </fieldset> <fieldset> <legend>Visio 2008 Pro $415</legend> <ul class="AspNet-CheckBoxList-RepeatDirection-Vertical"> <li class="AspNet-CheckBoxList-Item"> <input id="CheckBox2" type="checkbox" name="CheckBoxList1$0" value="first1" /> <label for="CheckBoxList1_0">Software Assurance $40.00</label> </li> <li class="AspNet-CheckBoxList-Item"> <input id="CheckBox3" type="checkbox" name="CheckBoxList1$1" value="second2" /> <label for="CheckBoxList1_1">Another Component $25.55</label> </li> <li class="AspNet-CheckBoxList-Item"> <input id="CheckBox4" type="checkbox" name="CheckBoxList1$1" value="second2" /> <label for="CheckBoxList1_1">A Second Component $10.25</label> </li> </ul> <span id="ItemCostSpan" style="background-color:White"></span> </fieldset> <span id="TotalCostSpan" style="background-color:White"></span> </form> ```

Original source