How do I change text in li without affecting siblings
<p>Ok, guys, I spent the entire day yesterday googling and trying out different solutions but nothing has worked. I have a dynamically generated collapsible div which contains various things inside of it. My issue is arising with the text inside the <code>ul</code> I have inside the collapsible. An example of my structure is as follows.</p>

<pre><code>&lt;ul id="list-0"&gt;
   &lt;li&gt;
     &lt;div id="div-00" class=".item"&gt;
       &lt;span id="item-00"&gt;Item&lt;/span&gt;
       &lt;select id="slide-00" data-role="slider" data-mini="true"&gt;
             &lt;option value="on"&gt;Need&lt;/option&gt;
             &lt;option value="off"&gt;Done&lt;/option&gt;                       
       &lt;/select&gt;
     &lt;/div&gt;
   &lt;/li&gt;
   &lt;li&gt;
      &lt;div id="div-01" class=".item"&gt;
         &lt;span id="item-01"&gt;Item&lt;/span&gt;
         &lt;select id="slide-01" data-role="slider" data-mini="true"&gt;
             &lt;option value="on"&gt;Need&lt;/option&gt;
             &lt;option value="off"&gt;Done&lt;/option&gt;                       
         &lt;/select&gt;
     &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I am trying to change the text within the span. That's easy to do with a simple </p>

<pre><code>  $("#item-00").text("whatevertext"); 
</code></pre>

<p>...and it works. But when I try to change the text of any following spans that text is applied to any previously clicked on spans....why does that happen?? Like if I go and change the text of the <code>id="#item-01"</code> span to <strong>"apples"</strong> after already changing the <code>id="#item-00"</code> span to <strong>"bananas"</strong> both spans will be changed to <strong>"apples"</strong>. This makes no sense to me and nothing I have tried has worked. If you need more of my code let me know.  </p>

<pre><code>$(document).on('click', '.item', function () {
     var div = $(this).attr("id"); 
     var split = div.split("-");
...more codings.... involving the opening of a popup to let user type in span text in input of id="thisothername"
     var name = $("#thisothername").attr("value");
     $("#" + "item" + "-" + split[1]).text(name);
});
</code></pre>

<p>I am currently using this to get the text from an input and apply it to the selected li > div > span  .... split[1] is an array index containing the parsed numeric value of the parent div id aka 00 or 01 which is then used to call the id of the child span and theoretically change ONLY that id's text aha.</p>
