Question

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.

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

html :

<form id="addCase" method="post" action="">
  <div id="container"></div>
  <input id="addNew" type="submit" value="Add Case">        
</form>

content.php

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

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

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

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

Answer 1

use html() instead of append(), if you need to show the inserted value only…

html() is used to set an element’s content, any content that was in that element is completely replaced by the new content

append() inserts content, specified by the parameter, to the end of each element in the set of matched elements.

....
$.post(url,function(){
   $(".insertedText").html(textInserted);   //here
});

    …. 

UPDATED

var i=1;
$(document).ready(function(){     
$("#addCase").submit(function(event) {
event.preventDefault(); 
//adding div
var idName ="Div_num_"+i;   
    $('.newValue').show(); 
    $('<div />').attr({
      'id' : idName       
      }).appendTo('#container').load("content.php", function() {   
          $('<h3>'+idName+'</h3>').prependTo($(this));    
        }); 

//showing input
  var $form = $("#addCase"),
  url = $form.attr("action"),      
  textInserted=$("#name").val();    
  $.post(url,function(){
    $("#"+ idName).find(".insertedText").html(textInserted);   //updated here 
  });
  $("#inputText").remove();
  i++;  //increment to the end
});   
});