JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<table>
  <thead>
    <tr>
      <td>ID</td>
      <td>Title</td>
      <td>PI Name</td>
      <td>Started</td>
      <td>Ended</td>
    </tr>
    http://jsfiddle.net/#run
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Title one</td>
      <td>PI One</td>
      <td>01/01/01</td>
      <td>01/01/01</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Title two</td>
      <td>PI two</td>
      <td>02/02/02</td>
      <td>02/02/02</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Title three</td>
      <td>PI three</td>
      <td>03/03/03</td>
      <td>03/03/03</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Title four</td>
      <td>PI four</td>
      <td>04/04/04</td>
      <td id="joe">04/04/04</td>
    </tr>
  </tbody>
</table>
<button>Load More</button>

CSS

td {
  border: 1px solid blue;
}

JavaScript

$('button').click(function() {
  var demo_row = " <tr><td>5</td><td>Title five</td><td>PI five</td><td>05/05/05</td><td id='sathya'>05/05/05</td></tr>";

  //what you were doing
  $("table >tbody:last").append(
      $('<td>').append(demo_row)
      .append(
    )
  );

  //what you should do    
  $("#sathya").after(demo_row);




});