title: Why the array is created with only the last object from the loop?
body: <p>I'm trying to create an Array which will be consisting of objects. The most is done, finally, the array has the same number of items but all of them are my last loop object. It seems like some kind of reference. I really don't know where is the problem.</p>
  
  <p>CodePen HTML:</p>
  
  <pre><code>&lt;table class="table table-admin-panel table-bordered"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th&gt;Active&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Price&lt;/th&gt;
        &lt;th&gt;Delete&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="table-admin-panel-active"&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
        &lt;td&gt; &lt;input class="name" type="text" value="Example 1"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="number" value="10"&gt;&lt;/td&gt;
        &lt;td class="table-admin-panel-remove"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="table-admin-panel-active"&gt;&lt;input type="checkbox" checked=""&gt;&lt;/td&gt;
        &lt;td&gt; &lt;input class="name" type="text" value="Example 2"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="number" value="20"&gt;&lt;/td&gt;
        &lt;td class="table-admin-panel-remove"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="table-admin-panel-active"&gt;&lt;input type="checkbox" checked=""&gt;&lt;/td&gt;
        &lt;td&gt; &lt;input class="name" type="text" value="Example 3"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="number" value="30"&gt;&lt;/td&gt;
        &lt;td class="table-admin-panel-remove"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="table-admin-panel-active"&gt;&lt;input type="checkbox" checked=""&gt;&lt;/td&gt;
        &lt;td&gt; &lt;input class="name" type="text" value="Example 4"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="number" value="40"&gt;&lt;/td&gt;
        &lt;td class="table-admin-panel-remove"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div class="buttons"&gt;
    &lt;button class="btn-bps btn-save"&gt;Zapisz&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CodePen JS:</p>
  
  <pre><code>$(document).ready(function() {
    $(".btn-save").click(function(event) {
      var element = new Object();
      var output = new Array();
      $(this).parent(".buttons").siblings("table").find("tr").each(function(index, el) {
          $(this).find("td input").each(function(index2, el) {
            if (index !== 0) {
              if (index2 === 0) {
                var checkboxStatus = $(this).prop("checked");
                if (checkboxStatus === true) {
                  element["active"] = "1";
                } else {
                  element["active"] = "0";
                }
              } else if (index2 === 1) {
                element["name"] = $(this).val();
              } else if (index2 === 2) {
                element["value"] = $(this).val();
              }
              element["id"] = index - 1 + "";
            }
          });
          output[index] = element;
        });
        console.log(output);
    });
  });
  </code></pre>