Selecting specific span to show user input
<p>i have this code which creates div dynamically onclick of a button. Within div created, will ask for user input and submit. On submit, it will show the input in the same div, then create another div which will do the same thing. The shown value should stay in each div and every div should only show it's related input.   </p>

<pre><code>var i=1;
$(document).ready(function(){     
   $("#addCase").submit(function(event) {
    event.preventDefault(); 
    //adding div
    var idName ="Div_num_"+i;   
        $('.newValue').show(); 
        $('&lt;div /&gt;').attr({
          'id' : idName       
          }).appendTo('#container').load("content.php", function() {   
              $('&lt;h3&gt;'+idName+'&lt;/h3&gt;').prependTo($(this));    
            }); 
      i++;
    //showing input
      var $form = $("#addCase"),
      url = $form.attr("action"),      
      textInserted=$("#name").val();    
      $.post(url,function(){
        $(".insertedText").append(textInserted);   
      });
      $("#inputText").remove();
   });   
});
</code></pre>

<p>html :</p>

<pre><code>&lt;form id="addCase" method="post" action=""&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  &lt;input id="addNew" type="submit" value="Add Case"&gt;        
&lt;/form&gt;
</code></pre>

<p>content.php</p>

<pre><code>&lt;div id="inputText"&gt;&lt;p&gt;Text :&lt;input name="name" id="name" type="text"/&gt;&lt;/p&gt;&lt;/div&gt;
&lt;div style="display:none;" class="newValue"&gt;&lt;p&gt; Inserted Text :&lt;span class="insertedText"&gt;&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;
</code></pre>

<p>I don't know how to select related span, so that the new value inserted only will be shown only in it's place.</p>

<p>Can someone pls show me how to do it proper. Thank you in advance for any help.</p>

<p>eg.
   1st input = A, 2nd input = B
, result now :
   div#1 show AB and div#2 show B
, result should be :
   div#1 show A and div#2 show B </p>
