JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="0" cellspacing="0" width="100%" class="table" id="addtable" border="1">
	<thead>
	  <tr>
		<th width="4%"><b>Date</b></th>
		<th width="4%"><b>Cut Number</b></th>
		<th width="4%"><b>Content</b></th>
		<th width="4%"><b>Others</b></th>
		<th width="5%"><b>Customer name</b></th>
		<th width="4%"><b>Customer code</b></th>
		<th width="5%"><b>Address</b></th>
		<th width="5%"><b>Owe amount</b></th>
		<th width="4%"><b>Executive</b></th>
		<th width="6%"><b>Obtain Amount</b></th>
		<th width="9%"><b>Obtain Room</b></th>
	  </tr>
	</thead>
	<tbody>
	  <tr id="addrow">
		<td><input name="date[]" id="mask_dm1" type="text" size="1" value=""></td>
		<td><input name="cutno[]" type="text" size="6" ></td>
		<td>
			<select name="cutcontent[]" id="selector">
				<option value="0">Please select</option>
				<option value="1">Value 1</option>
				<option value="2">Value 2</option>
				<option value="3">Value 3</option>
				<option value="other">Other</option>
			</select>
		</td>
		<td><input name="cutother[]" type="text" size="4"  id="cutother" disabled /></td>
		<td><input name="cusname[]" type="text" size="4" ></td>
		<td><input name="cuscode[]" type="text" size="2" ></td>
		<td><input name="cusaddress[]" type="text" size="4" ></td>
		<td><input name="owe[]" type="text" size="2"  id="cutowe" disabled /></td>
		<td><input name="executive[]" type="text" size="1"  /></td>
		<td><input name="obtainamount[]" type="text" size="2"  id="obtainamount" disabled /></td>
		<td><input name="obtainroom[]" type="text" size="2"  id="obtainroom" disabled /></td>
	  </tr>
	</tbody>
</table>
<p></p>
<input name="btnlogin" type="button" class="btn" id="btnAddMore" value="Add more row"/>

JavaScript

$(document).ready(function(){
	var clonedRow = '	<td><input name="date[]" id="mask_dm1" type="text" size="1" value=""></td>';
	clonedRow += '		<td><input name="cutno[]" type="text" size="6" ></td>';
	clonedRow += '		<td>';
	clonedRow += '			<select name="cutcontent[]" id="selector">';
	clonedRow += '				<option value="0">Please select</option>';
	clonedRow += '				<option value="1">Value 1</option>';
	clonedRow += '				<option value="2">Value 2</option>';
	clonedRow += '				<option value="3">Value 3</option>';
	clonedRow += '				<option value="other">Other</option>';
	clonedRow += '			</select>';
	clonedRow += '		</td>';
	clonedRow += '		<td><input name="cutother[]" type="text" size="4"  id="cutother" disabled /></td>';
	clonedRow += '		<td><input name="cusname[]" type="text" size="4" ></td>';
	clonedRow += '		<td><input name="cuscode[]" type="text" size="2" ></td>';
	clonedRow += '		<td><input name="cusaddress[]" type="text" size="4" ></td>';
	clonedRow += '		<td><input name="owe[]" type="text" size="2"  id="cutowe" disabled /></td>';
	clonedRow += '		<td><input name="executive[]" type="text" size="1"  /></td>';
	clonedRow += '		<td><input name="obtainamount[]" type="text" size="2"  id="obtainamount" disabled /></td>';
	clonedRow += '		<td><input name="obtainroom[]" type="text" size="2"  id="obtainroom" disabled /></td>';
	var appendRow = '<tr id="addrow">' + clonedRow + '</tr>';
	$('#btnAddMore').click(function(){
		$('#addtable tr:last').after(appendRow);
		$('select#selector').change(function(){
		  var theVal = $(this).val();
		  switch(theVal){
			case '1':
			  $('input#cutowe').removeAttr('disabled');
			  $('input#obtainamount').removeAttr('disabled');
			  $('input#obtainroom').removeAttr('disabled');
			  break;
			case '2':
			  $('input#cutother').removeAttr('disabled');
			  break;
			default:
			  $('input#cutowe').attr('disabled', 'disabled');
			  $('input#obtainamount').attr('disabled', 'disabled');
			  $('input#obtainroom').attr('disabled',...