How to append only one item at a time to an array?

Question

I am trying to add one element to an array that gets appended to an HTML div one at a time each time a user clicks a button. However, each time I try, multiple instances of the element gets added to the array and it displays way more than what I want. How do I only add one at a time?

var testArray = [];
var toBeAdded =
  '<div class="grid-x">' +
  '<div class="cell medium-2">' +
  "<p>Date</p>" +
  "</div>" +
  '<div class="cell medium-7">' +
  "<h4>Title</h4>" +
  "</div>" +
  '<div class="cell medium-3">' +
  "<h5>Delete</h5>" +
  "</div>" +
  "</div>";

$(".add-new-info").click(function() {
  testArray.push(toBeAdded);
  $(".info-container").append(testArray);
});

html

<div class="add-new-info">Click to add</div>
<div class="info-container"></div>

Answer 1

As people have commented, you are adding to the array and then appending.

You can try

 var testArray = []; var toBeAdded = '<div class="grid-x">' + '<div class="cell medium-2">' + "<p>Date</p>" + "</div>" + '<div class="cell medium-7">' + "<h4>Title</h4>" + "</div>" + '<div class="cell medium-3">' + "<h5>Delete</h5>" + "</div>" + "</div>"; $(".add-new-info").click(function() { testArray.push(toBeAdded); $(".info-container").append(toBeAdded); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="add-new-info">Click to add</div> <div class="info-container"></div> 

Or this:

 var testArray = []; var toBeAdded = '<div class="grid-x">' + '<div class="cell medium-2">' + "<p>Date</p>" + "</div>" + '<div class="cell medium-7">' + "<h4>Title</h4>" + "</div>" + '<div class="cell medium-3">' + "<h5>Delete</h5>" + "</div>" + "</div>"; $(".add-new-info").click(function() { testArray.push(toBeAdded); $(".info-container").html(testArray); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="add-new-info">Click to add</div> <div class="info-container"></div> 

Answer 2

var testArray = [];
let toBeAdded =
  `<div class="grid-x">
      <div class="cell medium-2">
          <p>Date</p>
      </div>
      <div class="cell medium-7">
          <h4>Title</h4>
      </div>
      <div class="cell medium-3">
          <h5>Delete</h5>
      </div>
   </div>`;

$(".add-new-info").click(function() {
  testArray.push(toBeAdded);
  $(".info-container").append(toBeAdded);
});

<div class="add-new-info">Click to add</div>
<div class="info-container"></div>