JSFiddle - React, Tailwind, and code Playground

HTML

<form name="form" action="next.php" onsubmit="return validate()" method="post" enctype="multipart/form-data">  
<table id="cartable" border="1">
        <tr>
        <th width = "150"> 
            Car
        </th>
        <th width = "150"> 
            Quantity
        </th>
        </tr>
        <tr>
        <td>
            <select name="car[]" id="car">
                <option value="" selected=“selected”> Please Select </option>
                <option value=b> b</option>
                <option value=a> a</option>
                <option value=nissan> nissan</option>
                <option value=ford> ford</option>
                <option value=volvo>volvo</option>
            </select>
            <br><br>
                <label id="label1" for="option1">model of car
                <input type="text" id="option1" />
                </label>
        </td>
        <td>
            <input type="text" size="29" name="date[]"/>
        </td>
        </tr>
        </table>
<input type="button" value="Add Row" onclick="addRow('cartable')"/>
<input type="button" value="Delete Row" onclick="deleteRow('cartable')"/>
            <center>
        <input type="submit" value="Submit">
        </center>
        </form>

CSS

label {
        display:block;
    }

JavaScript

function addRow(table1) { //This function add another row to the table
        var table = document.getElementById(table1);
        var countRow = table.rows.length;
        var row = table.insertRow(countRow);
        var countColumn = table.rows[1].cells.length;
        for(var i=0; i<countColumn; i++) {
            var newRow = row.insertCell(i);
            newRow.innerHTML = table.rows[1].cells[i].innerHTML;
        }
    }
    function deleteRow(table1){ //This function deletes the row from the table
        var table = document.getElementById(table1);
        var countRow = table.rows.length;
        if (countRow > 2) table.deleteRow(countRow - 1);
    }
    $(function() {
        $('label').hide();
        if($('#hdn_sel').val() != ''){
            $('#car').val($('#hdn_sel').val());
            showLabels($('#hdn_sel').val());
        }
        $('#car').change(function() {
            var val = $(this).val();
            $('#hdn_sel').val(val);
            $('label').hide();
            showLabels(val);
        });
        $("input")
        .focus(function () {
            $(this).next("span").fadeIn(1000);
        })
        .blur(function () {
            $(this).next("span").fadeOut(1000);
        });
    });

    function showLabels(val){
        switch (val){
            case 'volvo':
                $('#label1').show();
                break;
            default:
                $('label').hide();
                break;
         }
    }