title: new ajax request on drop down selection
body: <p>I have three tables and I'm displaying each one of them using a select list element and have ajax and jquery to return the tables. I want whenever I choose a new table from the list ajax should bring me data only from that table.</p>
  
  <p>Here is my form:</p>
  
  <pre><code>&lt;div class="panel"&gt;
                  &lt;div class="panel-heading"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="input-group"&gt;
                              &lt;span class="input-group-addon"&gt;Term&lt;/span&gt;
                              &lt;!-- I passed the tables name as values for a specific period --&gt;
                              &lt;select name="term" class="form-control" id="term"&gt;
                                  &lt;option value=""&gt;Select Period&lt;/option&gt;
                                  &lt;option value="period_one"&gt;1st Period&lt;/option&gt;
                                  &lt;option value="period_two"&gt;2nd Period&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;table class="table table-responsive table-bordered table-condensed table-striped table-hover" id="dataTable"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Student Name&lt;/th&gt;
                                  &lt;th&gt;Subject&lt;/th&gt;
                                  &lt;th&gt;Class&lt;/th&gt;
                                  &lt;th&gt;Score&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody id="periodTable"&gt;
  
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>The problem is not that I'm not getting the desired result. I'm getting the result that I want that's why I feel that there's no need for me to add codes from findGrades.php. </p>
  
  <p>here is my script:</p>
  
  <pre><code>$(document).ready(function() {
  $('#term').on('change', function() {
    /* Act on the event */
      var term = $('#term').val();
  
      if (term != '') {
        $.ajax({
          url:"findGrades.php",
          type:"post",
          data:{"term":term},
          dataType:"json",
          success:function(data){
              // Lfrankie solution
              $("#periodTable").replaceWith('&lt;tbody id="periodTable"&gt;&lt;/tbody&gt;');
  
             for (var count = 0; count &lt; data.length; count++) {
                  var htmlData = '&lt;tr&gt;&lt;td data-type="text" data-name="student_name" data-pk="'+data[count].id+'" class="student_name"&gt;'+data[count].first_name+' '+data[count].middle_name+' '+data[count].surname+'&lt;/td&gt;';
  
                  htmlData += '&lt;td data-type="text" data-name="subject_name" data-pk="'+data[count].id+'" class="subject_name"&gt;'+data[count].subject_name+'&lt;/td&gt;';
  
                  htmlData += '&lt;td data-type="text" data-name="class_name" data-pk="'+data[count].id+'" class="class_name"&gt;'+data[count].class_name+'&lt;/td&gt;';
  
                  if (data[count].score &lt;= 69 ) {
                      htmlData += '&lt;td style="color:red;" data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score"&gt;'+data[count].score+'&lt;/td&gt;&lt;/tr&gt;';
                  } else {
                      htmlData += '&lt;td data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score"&gt;'+data[count].score+'&lt;/td&gt;&lt;/tr&gt;';
                  }
  
                 //I feel this is where my problem lies
                 $("#periodTable").append(htmlData);
  
              }
              $('#dataTable').DataTable();
          }
        });
      } else {
        $("#periodTable").html('');
  
      }
  
   });
  });
  </code></pre>
  
  <p>The problem I'm having is whenever I select a table it brings the result fine, but when I select a new table it adds the new result to the old result. </p>
  
  <p>Ex: table 1:</p>
  
  <ol>
  <li>cat</li>
  <li>rat</li>
  </ol>
  
  <p>table 2
   1. cat
   2. rat
   3. dog
   3. goat</p>
  
  <p>Whereas result 2 should only show 'dog' and 'goat'. I realize it's because of the way I'm adding data <strong>$("#periodTable").append(htmlData);</strong>. I have tried changing it to this <strong>$("#periodTable").html(htmlData);</strong> which only returns a single item from a table like 'cat' from table 1 and 'rat' from table 2</p>
  
  <p>How can I effectively get this working. Let me know if more information is needed.</p>
  
  <p><strong>Update:</strong> Just added my html as requested by some. Also I included a essential aspect I forget to mention 'Datables', which I added also.</p>