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>"+
              '<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>'
            
$("#table").append(row);
    $('table tr').each(function(){
        $('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());   
   }
}); 
        }); 

}