JSFiddle - React, Tailwind, and code Playground

HTML

<table id="servicesTable" style="align:center;" width="100%" cellpadding="5" border="0">
  <thead>
    <tr>
      <th>Services</th>
      <th>Monitor</th>
      <th>Add/Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr class="newService" align="center">
      <td>
        <select id="newServiceName" name="serviceList">
                    <option value="1">Secure Shell</option>
                    <option value="2">Web Server</option>
                    <option value="3">Directory Services</option>
                    <option value="4">System Health</option>
                    <option value="5">Remote Desktop Protocol</option>
                </select>
      </td>
      <td>
        <input value="monitored" id="newMonitor" checked="checked" type="checkbox" name="monitored">
      </td>
      <td>
        <input class="add-remove-new" name="yt1" type="button" value="Add">
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Services</th>
      <th>Monitor</th>
      <th>Add/Remove</th>
    </tr>
  </tfoot>
</table>

JavaScript

$(document).on("click", ".add-remove-new:last", function() {
  $('tr.newService:first').clone().insertAfter($('tr.newService:last'));
});