在Ajax调用上重复数据

Question

I have a page that I'm building that I want to be able to change account names on the fly using Ajax. Everything works smoothly on the name change submission, however, on the second one, I get duplicated data, even though the function is relative to $(this). Here is an example of my console. It ends up overwriting the first submission somehow, and sends the second inputted name in for both the current account, and the previous account.

index.html

<a id="edit-name" number-data="[phone]" phone-sid="example"></a>

$(document).on("click", "#edit-name", function(){
 var num = $(this).attr("number-data");
 var sid = $(this).attr("phone-sid");

 $(this).parent().parent().append('<div class="input-wrapper"><div class="input-field"><label for="name-change">Name</label><input id="name-change" type="text" class=""></div><a id="send-name" class="btn">send</a></div>');


    $(document).on("click", "#send-name", function(){
    var val = $(this).prev().children("#name-change").val();

     $.ajax({
      type: "POST",
      url: 'manage-account.php',
      data: {trackingNumber: num, newName: val, phoneSID: sid},
      success: function(data){
        console.log(data);
    }
  });
 });
});

manage-account.php

$trackingNumber = mysqli_real_escape_string($link, $_POST['trackingNumber']);
$newName = mysqli_real_escape_string($link, $_POST['newName']);

echo "Tracking Number: ". $trackingNumber;
echo "Phone Name: ". $newName;

Answer 1

Bind two events separately, use data attributes

var cnt = 0;
$(document).on("click", ".edit-name", function() {
  var anc = $(this);
  num = anc.data("number"),
    sid = anc.data("sid"),
    html = '<div class="input-wrapper">\
    <div class="input-field">\
    <label for="name-change' + cnt + '">Name</label>\
    <input id="name-change' + cnt + '" type="text" data-number="' + num + '" data-sid="' + sid + '">\
    </div>\
    <a class="send-name btn">send</a>\
    </div>';

  anc.closest(".out").append(html);

});

$(document).on("click", ".send-name", function() {
  var inp = $(this).prev().find("input");
  console.log(inp.val(), inp.data("number"), inp.data("sid"));
});

.btn { border: 1px solid black; pointer: cursor; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="out">
  <div>
    <a class="edit-name" data-number="[phone]" data-sid="example">xxx</a>
  </div>
  <div>
    <a class="edit-name" data-number="+3123213" data-sid="eeee">xxx</a>
  </div>
  <div>
    <a class="edit-name" data-number="+123123" data-sid="dddd">xxx</a>
  </div>
</div>

and use data attributes.

</div>