title: How to show the JSON data into dynamic input text fields?
body: <p>I have a JSON data coming through AJAX GET method is:The JsonData is stored in <code>var trDataSecondTable</code> and displayed when I did <code>console.log(trDataSecondTable)</code>.</p>
  
  <pre><code>{  
     "assessCatAmount":[  
        {  
           "assessmentNo":1,
           "assessmentType":"PRE",
           "assessCatId":1,
           "assessReason":"A",
           "assessAmount":1,
           "assessPenalty":2,
           "entryBy":"PCS",
           "rStatus":"1"
        },
        {  
           "assessmentNo":1,
           "assessmentType":"PRE",
           "assessCatId":1,
           "assessReason":"D",
           "assessAmount":3,
           "assessPenalty":4,
           "entryBy":"PCS",
           "rStatus":"1"
        },
        {  
           "assessmentNo":1,
           "assessmentType":"PRE",
           "assessCatId":2,
           "assessReason":"B",
           "assessAmount":5,
           "assessPenalty":6,
           "entryBy":"PCS",
           "rStatus":"1"
        },
        {  
           "assessmentNo":1,
           "assessmentType":"PRE",
           "assessCatId":2,
           "assessReason":"E",
           "assessAmount":7,
           "assessPenalty":8,
           "entryBy":"PCS",
           "rStatus":"1"
        },
        {  
           "assessmentNo":1,
           "assessmentType":"PRE",
           "assessCatId":3,
           "assessReason":"C",
           "assessAmount":9,
           "assessPenalty":10,
           "entryBy":"PCS",
           "rStatus":"1"
        },
        {  
           "assessmentNo":1,
           "assessmentType":"PRE",
           "assessCatId":3,
           "assessReason":"F",
           "assessAmount":10,
           "assessPenalty":10,
           "entryBy":"PCS",
           "rStatus":"1"
        }
     ]
  }
  </code></pre>
  
  <p>My form looks like this which is dynamic type (can be added by clicking "+" or can be deleted by pressing "-")</p>
  
  <p>My form when page is loaded first looks like :</p>
  
  <p><a href="https://i.stack.imgur.com/9nRx0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9nRx0.png" alt="enter image description here"></a></p>
  
  <p><strong>I need to show these six JSON data into this form.If there is three JSON data then there should be three row total along with data.If there is twelve json data then twelve row needs to appear along with data in input field.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function sumIt() {
    $("#formContainer [type=number]").each(function() {
      var $row = $(this).closest(".row");
      var $fields = $row.find("[type=number]");
      var val1 = $fields.eq(0).val();
      var val2 = $fields.eq(1).val();
      var tot = (isNaN(val1) ? 0 : +val1) + (isNaN(val2) ? 0 : +val2)
      $row.find(".sum").text(tot);
    });
    var total = 0;
    $(".sum").each(function() {
      total += isNaN($(this).text()) ? 0 : +$(this).text()
    });
    $("#tot").text(total);
    return total;
  }
  
  $(".customs-table .remove:lt(1)").hide();  
  $(".vat-table     .remove:lt(1)").hide();  
  $(".excise-table  .remove:lt(1)").hide();  
  
  $("#formContainer").on("click", "button", function() {
    var selector = "div.row";
    var $div = $(this).closest(selector);
    if ($(this).is(".add")) {
      var $newDiv = $div.clone();
      $newDiv.find(":input").val(""); // clear all
      $newDiv.find("[type=number]").val(0); // clear numbers
      $newDiv.find(".sum").text(0); // clear total
      $newDiv.insertAfter($div)
    }
    else {
      $div.remove();
       sumIt(); 
    }
    $(".customs-table .remove:gt(0)").show();  
    $(".vat-table     .remove:gt(0)").show();  
    $(".excise-table  .remove:gt(0)").show();  
  });
  
  
  $("#formContainer").on("input", "[type=number]", sumIt);
  
  $("form").submit(function() {
    event.preventDefault();
    var user_profile = [];
    $(".row").each(function() {
      var $fields = $(this).find(":input");
      if ($fields.length &gt; 0) {
        var cat = $(this).find("div&gt;label").eq(0).text(); // use the label of the row
        var catId = ["","Customs","VAT","Excise"].indexOf(cat)
        user_profile.push({
          assessmentType: "PRE",
          assessCatID : catId, 
          assessReason: $fields.eq(0).val(),
          assessAmount: $fields.eq(1).val(),
          assessPenalty: $fields.eq(2).val(),
          assessTotal: +$fields.eq(1).val() + +$fields.eq(2).val() // the leading + makes it a number
        });
      }
    });
    console.log(user_profile);
    
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;&lt;/title&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="myForm"&gt;
    &lt;div id="formContainer" class="col-md-12" style="float: none;"&gt;
      &lt;!--  &lt;button onclick="myFunction()" class="pull-right"&gt;+&lt;/button&gt; --&gt;
      &lt;div style="margin-bottom: 30px;"&gt;
        &lt;div class="form-group row"&gt;
          &lt;div class="col-md-1"&gt;&lt;/div&gt;
          &lt;div class="col-md-4"&gt;
            &lt;label&gt;Reason&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;label&gt;Amount&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;label&gt;Penalty&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-md-1"&gt;Total&lt;/div&gt;
          &lt;div class="col-md-2"&gt;Action&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="customs-table row"&gt;
          &lt;div class="col-md-1"&gt;
            &lt;label&gt;Customs&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
            &lt;input type="text" class="form-control customReason" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-1"&gt;
            &lt;span class="sum"&gt;0&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;button type="button" class="add"&gt;+&lt;/button&gt;
            &lt;button type="button" class="remove"&gt;-&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="vat-table row"&gt;
          &lt;div class="col-md-1"&gt;
            &lt;label&gt;VAT&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
            &lt;input type="text" class="form-control vatReason" name="vatReason" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-1"&gt;
            &lt;span class="sum"&gt;0&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;button type="button" class="add"&gt;+&lt;/button&gt;
            &lt;button type="button" class="remove"&gt;-&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="excise-table row"&gt;
          &lt;div class="col-md-1"&gt;
            &lt;label&gt;Excise&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
            &lt;input type="text" class="form-control exciseReason" name="exciseReason" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-1"&gt;
            &lt;span class="sum"&gt;0&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;button type="button" class="add"&gt;+&lt;/button&gt;
            &lt;button type="button" class="remove"&gt;-&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-12 pull-right"&gt;
          &lt;label&gt;Total:&lt;/label&gt;&amp;nbsp;&lt;b&gt;&lt;span id="tot"&gt;0&lt;/span&gt;&lt;/b&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-success pull-right"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to manipulate using the for loop but not able to show them into those dynamic field.How can i achieve this?</p>
  
  <p>Updated Code:</p>
  
  <p>Since there are customs,vats,excise i need their each number like 1,2.Each of their start with 1,2,3 so on. 
  <a href="https://i.stack.imgur.com/l02dr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l02dr.png" alt="enter image description here"></a></p>
  
  <p>So here is what i try:
  i added <code>customNo</code> class.</p>
  
  <pre><code>&lt;div class="col-md-1 customNo"&gt;
              &lt;label&gt;Customs&lt;/label&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>and to show 1,2,3 i declared 3 different variable.</p>
  
  <pre><code>var showEmpty=true;
    var i=1,j=1,k=1;
    $.each(data.assessCatAmount, function(_,cat) {
      showEmpty = false; // there was data
      var type = types[cat.assessCatId];
      var $newDiv = $("#formContainer").find("."+type+"-table").eq(0).clone(); 
      $.each(cat,function(key,value) {
      $(".customNo").append("&lt;div&gt;&lt;label for="name"&gt; i &lt;/label&gt;&lt;/div&gt;");
         var fieldName = key.replace("assess",type);
         var $field = $newDiv.find("."+fieldName);
         if ($field) $field.val(value);
         i=i+1;
      });
      $("#formContainer").append($newDiv)
  </code></pre>
  
  <p>So i tried   <code>$(".customNo").append("&lt;div&gt;&lt;label for="name"&gt; i &lt;/label&gt;&lt;/div&gt;");</code> it is not displaying me 1,2. How can i get this?</p>