JSFiddle - React, Tailwind, and code Playground

by guradio

HTML

<table id="complainanttable" name="complainant" class="comres">
    <tr>
        <td class="tdlabel"> <span>First Name</span>

        </td>
        <td class="tdinput">
            <input type="text" name="caseinfocomplaintfname" class="caseinfocomplaintfname " />
        </td>
        <td class="tdlabel"> <span>Last Name</span>

        </td>
        <td class="tdinput">
            <input type="text" name="caseinfocomplaintlname" class="caseinfocomplaintlname" />
        </td>
    </tr>
    <tr>
        <td class="tdlabel"> <span>Middle Name</span>

        </td>
        <td class="tdinput">
            <input type="text" name="caseinfocomplaintmname" class="caseinfocomplaintmname" />
        </td>
        <td class="tdlabel"> <span>Suffix</span>

        </td>
        <td class="tdinput">
            <input type="text" name="caseinfocomplaintsuffix" class="caseinfocomplaintsuffix" />
        </td>
    </tr>
    <tr>
        <td class="tdlabel"> <span>City/Province</span>

        </td>
        <td class="tdinput">
            <input type="text" name="caseinfocomplaintcity" class="caseinfocomplaintcity" />
        </td>
        <td class="tdlabel"> <span>Town/Municipality</span>

        </td>
        <td class="tdinput">
            <input type="text" name="caseinfocomplainttown" class="caseinfocomplainttown" />
        </td>
    </tr>
    <tr>
        <td class="tdlabel"> <span>Barangay/District</span>

        </td>
        <td class="tdinput">
            <input type="text" name="caseinfocomplaintbrgy" class="caseinfocomplaintbrgy" />
        </td>
        <td class="tdlabel"> <span>Street</span>

        </td>
        <td class="tdinput">
            <input type="text" name="caseinfocomplaintstreet" class="caseinfocomplaintstreet" />
        </td>
    </tr>
    <tr>
        <td class="tdlabel"> <span>Contact Number</span>

        </td>
        <td class="tdinput">
            <input type="text" name="caseinfocomplaintcontact"...

JavaScript

var addedRows = [];

$(document).on('click', '#addcomplainant', function () {
    var $row = $("<tr class='breakline'><td class='tdlabel'> <span>First Name</span> </td><td class='tdinput'><input type='text' name='caseinfocomplaintfname' class='caseinfocomplaintfname ' /> </td><td class='tdlabel'> <span>Last Name</span> </td><td class='tdinput'><input type='text' name='caseinfocomplaintlname' class='caseinfocomplaintlname' /> </td></tr><tr><td class='tdlabel'> <span>Middle Name</span> </td><td class='tdinput'><input type='text' name='caseinfocomplaintmname' class='caseinfocomplaintmname' /> </td><td class='tdlabel'> <span>Suffix</span> </td><td class='tdinput'><input type='text' name='caseinfocomplaintsuffix' class='caseinfocomplaintsuffix' /> </td></tr><tr><td class='tdlabel'> <span>City/Province</span> </td><td class='tdinput'><input type='text' name='caseinfocomplaintcity' class='caseinfocomplaintcity' /> </td><td class='tdlabel'> <span>Town/Municipality</span> </td><td class='tdinput'><input type='text' name='caseinfocomplainttown' class='caseinfocomplainttown' /> </td></tr><tr><td class='tdlabel'> <span>Barangay/District</span> </td><td class='tdinput'><input type='text' name='caseinfocomplaintbrgy' class='caseinfocomplaintbrgy' /> </td><td class='tdlabel'> <span>Street</span> </td><td class='tdinput'><input type='text' name='caseinfocomplaintstreet' class='caseinfocomplaintstreet' /> </td></tr><tr><td class='tdlabel'> <span>Contact Number</span> </td><td class='tdinput'><input type='text' name='caseinfocomplaintcontact' class='caseinfocomplaintcontact' /> </td></tr>");
    //i also changed the html inside the first td from <span> to <p> to match your html markup
    addedRows.push($row);
    $("table#complainanttable tr").last().before($row);
});
$(document).on('click', '#consolelog', function () {

var complainantnames = [];

var complainant = $('#complainanttable tr').find('td').find('input[type=\"text\"]');
var complainanttemp =...