JSFiddle - React, Tailwind, and code Playground

HTML

<table id="test" class="table">
    <tr>
        <td>
            <select class="form-control" name="type[]">
                <option value="20">Auto Rental</option>
            </select>
        </td>
        <td>
            <select class="form-control" name="distance_type[]">
                <option value="1">Nearby</option>
            </select>
        </td>
    </tr>
    <tr class="clone">
        <td>
            <select class="readonly form-control" name="type[]" disabled>
                <option value="20">Boat Rental 1</option>
                <option value="20">Boat Rental 2</option>
                <option value="20">Boat Rental3</option>
            </select>
        </td>
        <td>
            <select class="readonly form-control" name="distance_type[]" disabled>
                <option value="1">Nearby</option>
                <option value="1">Far</option>
                <option value="1">10 miles</option>
            </select>
        </td>
    </tr>
</table>
<a class="add" href="#">Add New Row</a>

JavaScript

$(".add ").on('click', function () {
	        var clone = $('.clone').closest('tr')[0];
	        $(clone).clone().insertAfter(clone);
	        $('.readonly').attr("disabled", false)
	    });