title: Update data in a table with jquery and ajax
body: <p>I am trying to update a table according to ajax respond. My update should be insert as the first row inside <code>&lt;tbody&gt;</code> in my table. With my coding this is happening in my table when I insert data after page is loaded. My problem is when I insert data again without refreshing the page it insert to table as second row inside <code>&lt;tbody&gt;</code> and again insert another its going as third row and so on. </p>
  
  <p>But when I am refreshing or reloading the page my table adjusts data in correct order.
  Can anybody tell me how I fix this problem? </p>
  
  <p>This is my code so far : </p>
  
  <pre><code>$.ajax({
      type: "POST", // HTTP method POST or GET
      url: "process.php", //Where to make Ajax calls
      //dataType:"text", // Data type, HTML, json etc.
      dataType: 'html',
      data: {
          name: $('#name').val(),
          address: $('#address').val(),
          city: $('#city').val()
      },
      success: function(data) {
          $('#manage_user table &gt; tbody:first').append(data);
          //alert(data);
      },
      error: function(xhr, ajaxOptions, thrownError) {
          //On error, we alert user
          alert(thrownError);
      },
      complete: function() {
          //alert('update success'); 
      }
  });
  </code></pre>
  
  <p><strong>UPDATE :</strong> This is HTML for my table</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;input type='checkbox' class='selectAll' name='selectAll' value='' /&gt; Name&lt;/th&gt;
      &lt;th&gt;Address&lt;/th&gt;
      &lt;th&gt;City&lt;/th&gt;
      &lt;th&gt;Edit&lt;/th&gt;
      &lt;th&gt;Delete&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tbody&gt;
  
       // -------- this is the place I need to insert data 
  
       &lt;tr&gt;
        &lt;td&gt;&lt;input type='checkbox' name='' value='' class='' /&gt;&amp;nbsp;&amp;nbsp;sdfsdfs&lt;/td&gt;
        &lt;td&gt;dsfs&lt;/td&gt;
        &lt;td&gt;dsfdsf&lt;/td&gt;
        &lt;td&gt;&lt;span class='edit_ico'&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span class='delete_ico'&gt;&lt;/span&gt;&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
        &lt;td&gt;&lt;input type='checkbox' name='' value='' class='' /&gt;&amp;nbsp;&amp;nbsp;aaaaaaa&lt;/td&gt;
        &lt;td&gt;dfsdf&lt;/td&gt;
        &lt;td&gt;dsfsf&lt;/td&gt;
        &lt;td&gt;&lt;span class='edit_ico'&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span class='delete_ico'&gt;&lt;/span&gt;&lt;/td&gt;
       &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>