Jquery 选择特定范围以显示用户输入

我有一段代码，它在单击按钮时动态创建div。在创建的div中，将请求用户输入并提交。提交时，它将在同一个div中显示输入，然后创建另一个div，该div将执行相同的操作。显示的值应该保留在每个div中，每个div应该只显示它的相关输入

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

var i=1；
$（文档）.ready（函数（）{
$（“#addCase”）.submit（函数（事件）{
event.preventDefault（）；
//添加div
var idName=“Div\u num”+i；
$（'.newValue'）.show（）；
$（''）.attr({
“id”：idName
}).appendTo（'#container'）.load（“content.php”，function（）{
$（''+idName+''）.prependTo（$（this））；
}); 
i++；
//显示输入
var$form=$（“#addCase”），
url=$form.attr（“操作”），
textInserted=$（“#名称”）.val（）；
$.post（url，函数（）{
$（“.insertedText”）.append（textInserted）；
});
$（“#输入文本”）.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>

文本：

插入文本：

我不知道如何选择相关的跨度，这样插入的新值只会显示在它的位置上

有人能告诉我怎么做吗。提前感谢您的帮助

例如。 第一输入=A，第二输入=B ，结果如下： 第一组表演AB和第二组表演B ，结果应为： 如果只需要显示插入的值，则使用div#1显示A和div#2显示B

用于设置元素的内容，该元素中的任何内容都将被新内容完全替换

将参数指定的内容插入到匹配元素集中每个元素的末尾

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

已更新

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

var i=1；
$（文档）.ready（函数（）{
$（“#addCase”）.submit（函数（事件）{
event.preventDefault（）；
//添加div
var idName=“Div\u num”+i；
$（'.newValue'）.show（）；
$（''）.attr({
“id”：idName
}).appendTo（'#container'）.load（“content.php”，function（）{
$（''+idName+''）.prependTo（$（this））；
}); 
//显示输入
var$form=$（“#addCase”），
url=$form.attr（“操作”），
textInserted=$（“#名称”）.val（）；
$.post（url，函数（）{
$（“#”+idName.find（“.insertedText”）.html（textInserted）；//在此处更新
});
$（“#输入文本”）.remove（）；
i++；//递增到最后
});   
});

我不确定我是否完全理解您的问题，但如果您想显示输入文本，而不想显示其他内容，只需将append（）更改为html（），它会将相应元素的内容设置为您在参数中提供的内容，元素中的所有其他内容都将被删除。很抱歉，我不清楚。单击按钮时动态创建的div。在创建的每个div中，它将请求用户输入，当插入值并提交时，将创建另一个div，新值应显示在前一个div中。问题是：插入的值将添加到创建的每个div的所有跨度中（例如，div#1中的input1+input2，div#2中的input2），实际上，我只想显示每个div中每个跨度的每个值（例如，div#1中的input1，div#2中的input2）。谢谢你的建议，但我需要显示每个创建的div中插入的每个值。我编辑了我的问题，根据你的建议，创建的每个div中的所有值都被新的输入替换。我需要每个值都保留在每个div.bipen中，由于插入的值未显示，因此仍不起作用。谢谢你的更新。顺便说一句，它应该可以工作。。试着用

$（“.insertedText”）替换
$（“.insertedText”）
。.find（“.insertedText”）

它现在可以工作了，使用你的最后一个建议，但在我添加新变量之后，var a=i-1，然后在$（“.Div num”+a.find（“.insertedText”）中使用它。非常感谢你，bipen:）