JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table">

</table>
<button id="button" >add row</button>

JavaScript

$(document).ready(function () {
    var row="<tr>"+
               ' <tr>'+
                   '<th>category</th>'+
                   '<th>item1</th>'+
                   '<th>item2</th>'+
               '</tr>';
            $("#table").append(row)
            $("#button").click(
                function () {
                    addrow();
                }            
            );
        });





function addrow()
{
       var row='<tr>'+
           '<td><select>'+
                            '<option>--select--</option>'+
                            '<option value="1">fruits</option>'+
                             '<option value="2">vegi</option>'+
                             '<option value="3">flowers</option>'+
            '</select></td>'+
            '<td><select>'+
                            '<option>--select--</option>'+
                            '<option value="1">item1</option>'+
                             '<option value="2">item2</option>'+
                             '<option value="3">item3</option>'+
           '</select></td>'+
            '<td><select>'+
                             '<option>--select--</option>'+
                            '<option value="1">item1</option>'+
                             '<option value="2">item2</option>'+
                             '<option value="3">item3</option>'+
           '</select></td></tr>';
            row = $(row);
    row.find("select:eq(0)").change(function(){
           if($('option[value='+$(this).val()+']:selected').length>1){
     alert('option is already selected');
     $(this).val($(this).find("option:first").val());   
   } 
    });
$("#table").append(row);
}