title: Same object getting pushed in arrayList
body: <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>var totalList=[];
  $("#formContainer").on("click","button",function() {
    var selector = "div."+$(this).data("type")+"-table";
    var $div = $(this).closest(selector);
    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)
     var user_profile = [
            
            {
              assessmentType: "PRE",
              assessCatId :1,
              assessReason:$(".customReason").val(),
              assessAmount:$(".customAmount").val(),
              assessPenalty: $(".customPenalty").val()
              
            }
            
        ]
  
      totalList.push(user_profile);
      console.log(totalList);
  });
  
  $("form").submit(function() {
    event.preventDefault();
  });
  $("#formContainer").on("input","[type=number]",function() {
    $("#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()
    }); 
    console.log(total);
    $("#tot").text(total);
  
  }); 
  
  
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &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;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" id="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" id="customAmount" /&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" id="customPenalty" /&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 data-type="customs" class="add-customs"&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 class="add-vat" data-type="vat"&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 data-type="excise" class="add-excise"&gt;+&lt;/button&gt;
          &lt;/div&gt;
         
        &lt;/div&gt;
         &lt;div class="col-md-1 pull-right"&gt;
            &lt;label&gt;Total:&lt;/label&gt; &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;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Here i clicked "+" button and second custom row appears.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/b2xEv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b2xEv.png" alt="enter image description here"></a></p>
  
  <p>I tried to push them into arrayList named <code>"totalList=[];"</code> but it is pushing the same object repeatedly so:(See Array1 and array2 are same though their data from form is different)</p>
  
  <p><a href="https://i.stack.imgur.com/MZ1sA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MZ1sA.png" alt="enter image description here"></a></p>
  
  <p>How can i make this arrayList so dynamic which just push the current object rather than the old object? I am not able to push the newly created object into the arrayList.How can i change my arraylist?</p>