jqueryで複数回繰り返しているdivセクション内の対応する名前を表示するにはどうすればいいですか？

Question

特定の<div>セクションを複数回表示するためのjqueryにコードを記述しました。このセクションには、名前を表示するためのフォーマットが含まれています。

まず私は、以下のように名前と年齢を入力するためのフォームを持っている：

<form action="" method="post" name="person" id="addperson"> 
    <div> 
     <div class="form-group col-md-12"> 
      <label for="exampleInputEmail1">First Name</label> 
      <input type="text" class="form-control" name="fname" id="fnname" placeholder="First Name" required> 
      <div class="clearfix"></div> 
     </div> 
     <div class="form-group col-md-12"> 
      <label for="exampleInputEmail1">Last Name</label> 
      <input type="text" class="form-control" name="lname" id="lnname" placeholder="Last Name" required> 
      <div class="clearfix"></div> 
     </div> 
     <div class="form-group col-md-7"> 
      <label for="exampleInputEmail1" class="ctred">Age only if under 18</label> 
      <input type="text" class="form-control" name="age" id="aage" placeholder="Age" required> 
      <div class="clearfix"></div> 
     </div> 
     <button type="submit" id="senddata" name="send" class="btn btn-primary mag_top2">Submit</button> 
    </div> 
</form> 

上記のコードは、送信ボタンをクリックしたときに名前と年齢を入力するためのもので、それがデータベースに値を入力してください。名前と年齢の値ごとに、<div>セクションが表示され、対応する名前が入力されます。 DIV部が添付#pernで以下に示される：Iは、フォームに入力した各名について

$(document).ready(function(){ 
    $("#senddata").click(function(e) { 
     $.ajax({ 
      type : "POST", 
      url  : "data2.php", 
      data : dataString, 
      cache : false, 
      success : function(result1){ 
       var fname = firstname; 
       var lname = lastname; 
       var fullname = fname.concat(" ",lname); 
       document.getElementById("fullname").innerHTML = fullname; 
       //$("#fullname").html(fullname); 
      } 
     }); 
     $('#addperson').trigger("reset"); 

     $("#pern").append(
      "<div class='pad pen col-xs-12 col-sm-12 col-md-12 pern alert' id='bloc_style'>\ 
       <div class='pad col-xs-12 col-md-6'>\ 
        <h4 id='fullname'></h4>\ 
       </div>\ 
       <div class='pad col-md-5'>\ 
        <span class='next-step'>\ 
         <button class='ret_but butt label label-primary' id='equipment' name='equipment' type='button'>Select Equipment</button>\ 
        </span>\ 
        <div class='status'>\ 
         <b>Status</b><i class='open' id='open'>Open</i>\ 
        </div>\ 
       </div>\ 
       <div class='pad col-md-1'>\ 
        <button aria-hidden='true' data-dismiss='alert' class='closee' id='garbage' type='button'> \ 
         <i class='fa fa-trash-o' aria-hidden='true'></i>\ 
        </button>\ 
       </div>\ 
      </div>"); 
    }); 
}); 

、それは名前で#pernで与えDIV内に表示されます。しかし、このコードでは、入力された名前ごとにsubmitボタンをクリックすると、divセクションが作成されますが、入力された名前は前に入力した名前と置き換えられた前のdivセクションに表示されます。これを避ける方法は？前のボックスを前の名前に置き換えないで、対応するボックスに名前を表示します。

Answer 1

要素の同じIDを何度も何度も持つことはできません。それがあなたの価値を置き換える理由です。

$("div.pad:last").find('.fullname').html(fullname);