display array objects to html table
<p>I'm currently starting on a little project</p>

<p>I have this input which will push items to an array. My problem is everytime I push object using the button it will display some duplicate objects inside my table.</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>var tasks = [];
var count = 0;

$('#add').click(function() {
  var desc = $.trim($('#list-input').val());
  var id = Date.now();
  item = {};
  item["id"] = id;
  item["description"] = desc;
  tasks.push(item);

  if (!desc) {
    item["id"] = "";
    alert("Input a description");
  }

  var tbl = $("&lt;table/&gt;").attr("id", "mytable");
  $("#mylist").append(tbl);
  for (var i = 0; i &lt; tasks.length; i++) {
    var tr = "&lt;tr&gt;";
    var td1 = "&lt;td&gt;" + tasks[i]["id"] + "&lt;/td&gt;";
    var td2 = "&lt;td&gt;" + tasks[i]["description"] + "&lt;/td&gt;";

    $("#mytable").append(tr + td1 + td2);
  };

  //clear input field
  $('#list-input').val('');
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="container"&gt;
  &lt;input id="list-input" /&gt;
  &lt;button id="add"&gt;Add To List&lt;/button&gt;
  &lt;button id="delete"&gt;Remove From List&lt;/button&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
  &lt;h1&gt;Your List&lt;/h1&gt;
  &lt;div id="mylist"&gt;

  &lt;/div&gt;
  &lt;button id="clear"&gt;clear&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>