JSFiddle - React, Tailwind, and code Playground

by NewUserFiddle

HTML

<div id="form-wrap" style="width:500px; margin: 0 auto;">
    <table>
      <tr>
        <th width="55%">Service Name</th>
        <th width="35%">From Price</th>
        <th width="10%"></th>
      </tr>
          <tr id="template">
            <td id="example" width="55%">
              <select name="service-name" id="service-name" style="width:230px;">
                <option value="" selected>--select--</option>
                <option value="service-1">service-1</option>
                <option value="service-2">service-2</option>
                <option value="service-3">service-3</option>
                <option value="service-4">service-4</option>
              </select>
            </td>
            <td width="45%"><input type="text" name="from-price" id="from-price" /></td>
            <td width="10%"><input type="button" id="remove" value="remove" /></td>
          </tr>
    </table>
    <input type="button" value="+ Add Row" id="add-row" />
  </div

CSS

#remove { display: none; }

JavaScript

jQuery(document).ready(function() {
    id = 0;
    var template = jQuery('#template');
    jQuery('#add-row').click(function() {
      var row = jQuery(template).clone();
      var templateSelectedIndex = template.find("select")[0].selectedIndex;
      template.find('input:text').val("");
      row.attr('id','row_'+(++id));
      row.find('#remove').show();
      row.find("select")[0].selectedIndex = templateSelectedIndex;
      template.after(row);
    });
    jQuery('#form-wrap').on('click','#remove',function() {
      jQuery(this).closest('tr').remove();
    });
    
  });