JSFiddle - React, Tailwind, and code Playground

HTML

<table align="left" id="show2">
    <tr>
        <td align="left" colspan="2" align="center">
            <div class="employmentHistory">
                <table width="700px" class="employmentHistoryForm" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="left">
                            <table class="medication_Group" align="left" style="padding-left: 50px;">
                                <tr class="row2">
                                    <td class="text-fields" align="right">Dose value</td>
                                    <td align="left" class="text-fields">
                                        <input style="width: 60px;" value="" class="admin-input" type="text" name="dose_value[]" />&nbsp;
                                        <select style="width: 70px;" class="select-input" name="dose[]">
                                            <option selected value="0">Dose</option>
                                            <option value="g">g</option>
                                            <option value="Mg">Mg</option>
                                            <option value="&mu;g">&mu;g</option>
                                            <option value="ml">ml</option>
                                            <option value="Drops">Drops</option>
                                            <option value="Amps">Amps</option>
                                            <option value="Puffs">Puffs</option>
                                        </select>&nbsp;
                                        <select style="width: 95px;" class="select-input" name="frequency[]">
                                            <option selected value="0">Frequency</option>
                                            <option value="Daily">Daily</option>
                                            <option value="Bd">Bd</option>
                                            <option value="Tds">Tds</option>
              ...

JavaScript

$(document).ready(function () {
     //This line clones the row inside the '.row' class and transforms it to plain html.
     var clonedRow = $('.row2').clone().html();

     //This line wraps the clonedRow and wraps it <tr> tags since cloning ignores those tags
     var appendRow = '<tr class = "row2">' + clonedRow + '</tr>';
     var counter = 0;
     $('#btnAddMore').click(function () {
         //this line get's the last row and appends the appendRow when it finds the correct row.
         $('.employmentHistoryForm tr:last').after(appendRow);

         counter++;
         $('.employmentHistoryForm tr:last input[type="text"]').attr('name', 'dose_value[' + 'a' + counter + ']');
         $('.employmentHistoryForm tr:last select:nth-child(2)').attr('name', 'dose[' + 'a' + counter + ']');
         $('.employmentHistoryForm tr:last select:nth-child(3)').attr('name', 'frequency[' + 'a' + counter + ']');
         $('.employmentHistoryForm tr:last select:nth-child(4)').attr('name', 'route[' + 'a' + counter + ']');
         $('.employmentHistoryForm tr:last').find('input').val('');


     });

     //when you click on the button called "delete", the function inside will be triggered.
     $('.deleteThisRow').live('click', function () {
         var rowLength = $('.row2').length;
         //this line makes sure that we don't ever run out of rows.
         if (rowLength > 1) {
             deleteRow(this);
         } else {
             $('.employmentHistoryForm tr:last').after(appendRow);
             deleteRow(this);
         }
     });

     function deleteRow(currentNode) {
         $(currentNode).parent().parent().remove();
     }
 });