JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" cellspacing="0" id="orderchecklist_item_grid_servicecenters" class="data border">
    <colgroup><col width="120">
    <col>
    <col width="100">
        <col width="70">
    </colgroup><thead>F
        <tr class="headings">
            <th width="80%">Item</th>
                         <td width="10%" class="last"><button style="" onclick="addfield();" class="scalable add" type="button" title="Add Option" id="add_new_option_button"><span><span><span>Add Option</span></span></span></button></td>

          </tr>
    </thead>
    <tbody id="orderchecklist_item_list">

         <tr class="template" id="orderchecklist_item_template1">
            <td><input type="text" value="" name="servicename[]" placeholder="check list item" class="input-text">
            </td>
            <td class="last"><button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="Delete" id="delete_button"><span><span><span>Delete</span></span></span></button></td>
            </tr>

    </tbody>
        <tbody>


    </tbody>
        <tbody>


    </tbody>
    <tfoot id="extra_field" class="no-display template">
        <tr class="template" id="orderchecklist_item_template">
            <td><input type="text" name="item[]" placeholder="check list item" class="input-text"></td>


            <td class="last">   <button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="Delete" id="delete_button"><span><span><span>Delete</span></span></span></button></td>  
        </tr>


    </tfoot>

 </table>

CSS

.no-display {
  display:none;
}

JavaScript

function addfield()
{
  var htm= $('extra_field').innerHTML;
  $('extra_field').insert({before:htm});
}
function removefield(ele)
{ 
  var row = ele.parentNode.parentNode;
  row.parentNode.removeChild(row);
}