jQuery many functions for many rows, how to manage?

I have this code: Example of my code working

Or maybe this with ID: Example 2 of my code

Another try: http://jsbin.com/wazeba/edit?js,console,output

And another one (with code from here: https://stackoverflow.com/a/4785886/4412054 ): http://jsbin.com/fuvoma/edit?js,console,output

IN EVERY CASE THE ID IS THE SAME.

My html:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <br><br><br>

<button id="btnTest">Test many!</button>
<br><br><br>
<form id="formTest">

  <table>
    <thead>
    <tr>
      <th>Code</td>
    <th>Name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="anumber" id="anumber">
      </td>
      <td>
        <input type="text" name="name" id="name">
      </td>
    </tr>
  </tbody>
  </table>


</form>

<button type="button" id="btnAdd">Add</button>

</body>
</html>

and my Javascript:

jQuery(document).ready(function() {

    jQuery("#btnTest").click(function() {
        for (var i = 0; i < 10; i++) {
            console.log("Test: " + i);
            jQuery("#formTest tbody tr").last().find("input[name*='anumber']").val('243');
            jQuery('#btnAdd').click();
        }
    });


    jQuery("#btnAdd").click(function(e) {
        lastR = $("#formTest tbody tr").last();
        jQuery(lastR).clone().appendTo('#formTest tbody');
      readFnc(lastR);
    });

    function readFnc(lastR) {
      rowCode = $(lastR).find("input[name='anumber']");
      rowName = $(lastR).find("input[name='name']");
      var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {
       })
      .fail( function() {
        console.log("Error");
      })
      .done( function(data) {
        console.log("Goo!");
        rowCode.val(data.code);
        rowName.val(data.name);
        $(lastR).css({"background-color": "#99ff99"});
      });
    }

});

Now I need to update every row with a different value from each getJSON. How to manage many ajax calls or, more abstract, many functions?

I need to update form when the server resonds. And just then.

If I assign an ID to every tr then on each "Add" click the function variables are override. How to do?

Solution

getJSON is async so the script create 10 rows and just THEN it resolve the getJSOn promise, using the last() selector it assign the value only to the last row created. To avoid this issue you can pass the cloned object to the function. Just for explanation you can see that callOrder and resolveOrder are in a different order.

  var callORder = 0;

  jQuery("#btnAdd").click(function(e) {
    lastR = $("#formTest tbody tr").last();
    var newRow = jQuery(lastR).clone();
    newRow.appendTo('#formTest tbody');
    readFnc(newRow,++callORder);
  });

  var resolveOrder = 0;

  function readFnc(newR,callORder) {

    var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {})
      .fail(function() {
        console.log("Error");
      })
      .done(function(data) {
        console.log("Goo!");
        rowCode = newR.find("input[name='anumber']");
        rowName = newR.find("input[name='name']");
        rowCode.val(data.code + " " + (++resolveOrder)+ " " + (callORder));
        rowName.val(data.name);
        newR.css({
          "background-color": "#99ff99"
        });
      });
  }

jQuery(document).ready(function() {

  jQuery("#btnTest").click(function() {
    for (var i = 0; i < 10; i++) {
      console.log("Test: " + i);
      jQuery("#formTest tbody tr").last().find("input[name*='anumber']").val('243');
      jQuery('#btnAdd').click();
    }
  });

  var callORder = 0;
  
  jQuery("#btnAdd").click(function(e) {
    lastR = $("#formTest tbody tr").last();
    var newRow = jQuery(lastR).clone();
    newRow.appendTo('#formTest tbody');
    readFnc(newRow,++callORder);
  });

  var resolveOrder = 0;

  function readFnc(newR,callORder) {

    var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {})
      .fail(function() {
        console.log("Error");
      })
      .done(function(data) {
        console.log("Goo!");
        rowCode = newR.find("input[name='anumber']");
        rowName = newR.find("input[name='name']");
        rowCode.val(data.code + " " + (++resolveOrder)+ " " + (callORder));
        rowName.val(data.name);
        newR.css({
          "background-color": "#99ff99"
        });
      });
  }

});

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <br>
  <br>
  <br>

  <button id="btnTest">Test many!</button>
  <br>
  <br>
  <br>
  <form id="formTest">

    <table>
      <thead>
        <tr>
          <th>Code</td>
            <th>Name</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="text" name="anumber" id="anumber">
          </td>
          <td>
            <input type="text" name="name" id="name">
          </td>
        </tr>
      </tbody>
    </table>


  </form>

  <button type="button" id="btnAdd">Add</button>

</body>

</html>