How to replace the text of an element with the value of another inside of a specific parent tag using jQuery?
<p>High level: How do I replace the text of an element with the value of another inside of a specific parent tag?</p>

<p>Specific: Using the HTML below, I want to replace the html of "span.number" with the value of "input.someOtherNumber". I can have multipul of these list items on a page so it needs to be narrowed down using the parent.</p>

<pre><code>&lt;ul&gt;
 &lt;li class="list-item"&gt;
    &lt;span class="number"&gt;0&lt;/span&gt;
    &lt;input class="someOtherNumber" type="text" value="10" /&gt;
 &lt;/li&gt;

 &lt;li class="list-item"&gt;
    &lt;span class="number"&gt;0&lt;/span&gt;
    &lt;input class="someOtherNumber" type="text" value="99" /&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The following JS works to replace the "span.number" value with the value of "inout.someOtherNumber" but it doesn't limit it to the parent. How can I limit it to the parent?</p>

<pre><code>    $(".someOtherNumber").keyup(function () { 
      var value = $(this).val();
      $(".number").text(value);
    }).keyup();
</code></pre>

<p>EDIT:</p>

<p>If the input is wrapped in a span then how do I accomplish it? I am really looks for a solution that checks for a parent because in my real code I have multipul elements that can nested inside of each other so the ".sibling" or ".prev/.next" will not work. The updated HTML would look like this:</p>

<pre><code>&lt;ul&gt;
 &lt;li class="list-item"&gt;
    &lt;span class="number"&gt;0&lt;/span&gt;
    &lt;span&gt;&lt;input class="someOtherNumber" type="text" value="10" /&gt;&lt;/span&gt;
 &lt;/li&gt;

 &lt;li class="list-item"&gt;
    &lt;span class="number"&gt;0&lt;/span&gt;
    &lt;span&gt;&lt;input class="someOtherNumber" type="text" value="99" /&gt;&lt;/span&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>You can see it here: <a href="http://jsfiddle.net/8bXbx/" rel="nofollow">http://jsfiddle.net/8bXbx/</a></p>
