JSFiddle - React, Tailwind, and code Playground

by Aashish Handa

HTML

<table>
<tbody style="border: 1px solid rgba(0,0,0,0.35); height: 34px; line-height: 34px;">
    <tr class="text-center">
        <td>
			<select id="myDropdown" name="bill_product[]" onChange="dropdownTip(this.value)">
			    <option disabled selected value="">Select Product</option>
				<option id="1" value="31/01/2020">Product #1</option>
                <option id="2" value="31/01/2030">Product #2</option>
                <option id="3" value="31/01/2040">Product #3</option>
            </select>
		</td>
		<td>
		    <input name="txtbox" type="text" id="txtbox" />
		</td>
		<td>
		    <button type="button" class="btn btn-danger btn-xs disabled">
		        Delete
			</button>
		</td>
	</tr>
</tbody>
</table>
<div class="col-md-12">
									<button id="addrow" type="button" class="btn btn-default btn-xs">
										<i class="fa fa-plus"></i> Add Product
									</button>
									<div class="gxcpl-ptop-20"></div>
								</div>

JavaScript

// Billing
			$(document).ready(function() {
				$("#myDropdown").change(function() {
					var selectedValue = $(this).val();
					$("#txtbox").val(selectedValue);
				});
			});
			// Billing

			// Add row in Billing
			$(document).ready(function () {
			    var counter = 0;

			    $("#addrow").on("click", function () {
			        var newRow = $("<tr class='text-center'>");
			        var cols = "";

			        cols += '<td><select name="bill_product[]"><option disabled selected value="">Select Product</option><cms:pages masterpage="product.php"><option value="<cms:show k_page_id />"><cms:show k_page_title /></option></cms:pages></select></td>';
			        cols += '<td><input type="text" id="txtbox" name="txtbox" /></td>';
			        cols += '<td><button type="button" class="ibtnDel btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td>';
			        newRow.append(cols);
			        $("table.order-list").append(newRow);
			        counter++;
			    });
			    $("table.order-list").on("click", ".ibtnDel", function (event) {
			        $(this).closest("tr").remove();       
			        counter -= 1
			    });
			});
			// Add row in Billing