JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width: 70%" id="Table" name="Table">
		  <tr>
			<th>#</th>
			<th>Cause</th>
		  </tr>
		  <tr>
			<td>1</td>
			<td>
				<select name='report_cause2' id='report_cause2' class="report_cause">
					<option value='default'>-</option>
					<option value='other'>Other, Not Listed</option>
				</select>
				<p class="cause_details">
					<input type="text" name="cause_detail_info" id="cause_detail_info" placeholder="Type cause here" size="48" maxlength="50" class="textbox required" value="" />
				</p>
			</td>
		  </tr>
		</table>
		<input type="button" id="btnAdd" name="btnAdd" value="Add More" class="button" />

CSS

#Table
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse:collapse;
}
#Table td, #Table th 
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#Table th 
{
font-size:1.4em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#fff;
}
#Table tr.alt td 
{
color:#000;
background-color:#EAF2D3;
}

JavaScript

var count_2 = 5;
var table_count2 = 1;

$(document).ready(function(){
	
	$('.cause_details').hide();
	$('.report_cause').change(function(){

	if ($(this).val() == 'other'){
	$(this).parent().find('.cause_details').show();
		}else{
	$(this).parent().find('.cause_details').hide();
		}

	});
	
	$('#btnAdd').click(function(){
		count_2 = count_2 + 2;
		table_count2 = table_count2 + 1;
        $('#Table tr:last').after('<tr><td>'+table_count2+'</td>'+
		'<td>'+
			'<select name=\"report_cause'+count_2+'\" id=\"report_cause'+count_2+'\" class=\"report_cause\">'+
				'<option value=\'default\'>-</option>'+
				'<option value=\'other\'>Other, Not Listed</option>'+
			'</select>'+
			'<p class=\"cause_details\">'+
				'<input type=\"text\" name=\"cause_detail_info'+count_2+'\" id=\"cause_detail_info'+count_2+'\" placeholder=\"Type cause here\" size=\"48\" maxlength=\"50\" class=\"textbox required\" value=\"\" />'+
			'</p>'+
		'</td></tr>');
    });
});