JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<input type='button' value='Add Another Product' id='aprod'>
<table id='page3_inside'>
    <tr id='ln1'>
        <td>
            <label for="product_name">Product Name</label>
            <br>
            <select class='input name_of_product' style='width:150px; height:34px;' id='name_of_product' name="name_of_product[]">
                <option value="">Select from List</option>
                <?php $qry=$ handler->prepare('SELECT * FROM product_list WHERE plist_compid = ?'); $qry->execute(array($id)); while($row = $qry->fetch(PDO::FETCH_ASSOC)){ $pname = $row['plist_name']; echo "
                <option value='$pname'>$pname</option>"; } ?></select>
        </td>
        <td>
            <label for="product_cat">Product Category</label>
            <br>
            <select class="input product_category" id="product_category" name="product_category[]" style="font-family:verdana; width:150px; height:34px; border: 1px solid #000000;">
                <optgroup label="Apparel">
                    <option value="Footwear">Footwear</option>
                    <option value="Underwear">Underwear</option>
                    <option value="Outerwear">Outerwear</option>
                    <option value="Cloth">Cloth</option>
                    <option value="Jewelry">Jewelry</option>
                    <option value="Headwear">Headwear</option>
                    <option value="Eyewear">Eyewear</option>
                    <option value="Legwear">Legwear</option>
                    <option value="Blanket">Blanket</option>
                    <option value="Carpet">Carpet</option>
                    <option value="Sport Series">Sport Series</option>
                </optgroup>
            </select>
        </td>
        <td>
            <label for="qty">Qty</label>
            <br>
            <input type="text" value="" class="input qty" style="width:100px;" id="qty" name="qty[]" placeholder="Qty" onkeypress="return isNumberKey(event)" />
        </td>
      ...

JavaScript

$('#page3_inside').on('change','.name_of_product', function(event){
    event.preventDefault();
    var prodname = $(this).val();
    var cid = $('#compid').val();
    var $this = $(this).closest('tr');
    console.log($this);
    $this.find('.name_of_product').val('dfsdf');
    /*$.ajax({
        url : 'ajaxrequests.php',
        type : 'POST',
        datatype : 'JSON',
        data : {
                psearch : 1,
                product : prodname,
                compid : cid
            },
        success : function(show){
            $this.find('.name_of_product').val(show.plist_name);
            $this.find('.product_category').val(show.plist_category);
            $this.find('.Category_of_the_Product').val(show.plist_category);
            $this.find('.PO').val(show.plist_po);
            $this.find('.brand').val(show.plist_brand);
            }
    }); */                
});


$('#aprod').on('click', function() {
    $('#ln1').first().clone().appendTo('#page3_inside');
    prodnum = prodnum + 1;
    $('#conf_prodnum').val(prodnum);
});