title: JQuery/Javascript Append HTML Table Data To TBODY, Double Output
body: <p>Good morning all.  I have an issue that's stopping my project progression until I can get through it.  So, I thought I'd ask you fine folks for an assist!</p>
  
  <p>The situation is this: I have to provide a dynamically growing table to the users that will allow them to enter 1-N records for returns.  So they load the page, click the button, and a new row appears.  I am glad to say that my code works, with one major flaw - the table rows repeat!!  So if the user were to click the "Add" button twice, I'd expect to have them see:</p>
  
  <pre><code>+---+------+------+----------+
  | # | Year | week | Quantity |
  +---+------+------+----------+
  | 1 |   |v||   |v|| ________ |
  +---+------+------+----------+
  | 2 |   |v||   |v|| ________ |
  +---+------+------+----------+
  </code></pre>
  
  <p>Instead they see this:</p>
  
  <pre><code>+---+------+------+----------+
  | # | Year | week | Quantity |
  +---+------+------+----------+
  | 1 |   |v||   |v|| ________ |
  +---+------+------+----------+
  | 2 |   |v||   |v|| ________ |
  +---+------+------+----------+
  | 1 |   |v||   |v|| ________ |
  +---+------+------+----------+
  | 2 |   |v||   |v|| ________ |
  +---+------+------+----------+
  </code></pre>
  
  <p>It's the weirdest thing to me.  This code's not in a loop or anything - so it should just get one row!!  Relevant code in my <a href="https://jsfiddle.net/TheJester1977/zRX2D/2482/" rel="nofollow">Fiddle here</a>, as well as below (snippets for question purposes)...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;fieldset class="fieldset2"&gt;
      &lt;legend&gt;Return Specific Curriculum Information&lt;/legend&gt;
      &lt;input type="hidden" id="ccnt" value="0"&gt;
      &lt;table class="table" id="retc"&gt;
         &lt;tr&gt;
             &lt;th class="th"&gt;Entry #&lt;/th&gt;
             &lt;th class="th"&gt;Year&lt;/th&gt;
             &lt;th class="th"&gt;Week/Packet&lt;/th&gt;
             &lt;th class="th"&gt;Quantity&lt;/th&gt;
         &lt;/tr&gt;
         &lt;tbody&gt;
  
         &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;input type="button" value="Add Curriculum To Return" class="button" id="addcurric"&gt;
      &lt;input type="button" value="Remove All Entries" class="button" id="remcurric"&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>JQuery/JavaScript</p>
  
  <pre><code>$('#ccnt').data('count', 0);
  $('#addcurric').click(function () {
      function getcount() {
          var $this = $('#ccnt'),
          count = $this.data('count') + 1;
  
          $this.data('count', count);
          return count;
      }
  
      var mycount = getcount();
      //console.log('mycount: ' + mycount);
  
      var tdclass;
      if (mycount % 2 == 1) {
          tdclass = "td1";
      } else {
          tdclass = "td2";
      }
      //console.log('tdclass: ' + tdclass);
      //window.alert(mycount + ' ' + tdclass);
  
      var chtml = "";
      chtml += "'&lt;tr&gt;";
      chtml += "    &lt;td class=\"" + tdclass + "\"&gt;" + mycount + "&lt;/td&gt;\\n";
      chtml += "    &lt;td class=\"" + tdclass + "\"&gt;&lt;select name=\"HYear" + mycount + "\" id=\"hyear" + mycount + "\"&gt;\\n";
      chtml += "        &lt;option value=\"0\"&gt;-- Select --&lt;/option&gt;\\n";
      chtml += "        &lt;option value=\"1\"&gt;Year 1&lt;/option&gt;\\n";
      chtml += "        &lt;option value=\"2\"&gt;Year 2&lt;/option&gt;\\n";
      chtml += "        &lt;option value=\"3\"&gt;Year 3&lt;/option&gt;\\n";
      chtml += "    &lt;/select&gt;&lt;/td&gt;\\n";
      chtml += "    &lt;td class=\"" + tdclass + "\"&gt;&lt;select name=\"Week" + mycount + "\" id=\"week" + mycount + "\"&gt;\\n";
      chtml += "        &lt;option value=\"0\"&gt;-- Select --&lt;/option&gt;\\n";
      chtml += "        &lt;option value=\"1\"&gt;Week 1&lt;/option&gt;\\n";
      chtml += "        &lt;option value=\"2\"&gt;Week 2&lt;/option&gt;\\n";
      chtml += "        &lt;option value=\"3\"&gt;Week 3&lt;/option&gt;\\n";
      chtml += "    &lt;/select&gt;&lt;/td&gt;\\n";
      chtml += "    &lt;td class=\"" + tdclass + "\"&gt;&lt;input type=\"text\"  name=\"qty" + mycount + "\" class=\"input\"&gt;&lt;/td&gt;\\n";
      chtml += " &lt;/tr&gt;\\n'";
  
      //console.log('chtml is: ' + chtml);
      //window.alert(chtml);
      //console.log("Writing an iteration of chtml to scrren...");
      $('#retc &gt; tbody').append(chtml);
  });
  </code></pre>
  
  <p>Can someone out there help me understand how/why I'm getting a duplicate row entry for each time the button is clicked?</p>
  
  <p>Thanks in advance!!</p>