title: for...in loop with jQuery append
body: <p>I'm still new to learning loops so I'm a little confused. I have a <code>for...in</code> loop that loops a json file of objects. Then I have jQuery create some html elements for each object. I have one problem though, every time it loops, it repeats the previous objects along with the new one so the output becomes: </p>
  
  <pre><code>-name
  
  -name
  -test
  
  -name
  -test
  -someone
  
  -name
  -test
  -someone
  -something
  </code></pre>
  
  <p>But I'm trying to do</p>
  
  <pre><code>-name
  
  -test
  
  -someone
  
  -something
  </code></pre>
  
  <p>How can I achieve this?</p>
  
  <p>My current code for it is this: </p>
  
  <pre><code>var html = ""
  for (var name in urls) {
      html += `&lt;div class='card-panel white'&gt;&lt;div class='container'&gt;&lt;div class='row'&gt;&lt;div class='input-field col s12'&gt; ${name} &lt;br&gt; ${urls[name].url} &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;`
      $("#main").append(html)
  }
  </code></pre>