JSFiddle - React, Tailwind, and code Playground

by Kamal Agarwal

HTML

<select name="amount" title="How many golfers" class=" validate['required']" id="amount" size="1">
<option value="Select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

<div class="addtional_golfers_container">
<div class="group" id="first_row" style="display:none">

<div style="" id="first_golfer_name1_container_div" class="ccms_form_element cfdiv_text"><label>First Name</label><input type="text" placeholder="Enter First Name" name="first_golfer_name" value="" title="" class="validate['required']" size="30" maxlength="150">
<div class="clear"></div><div id="error-message-first_golfer_name"></div></div><div style="" id="first_golfer_last_name1_container_div" class="ccms_form_element cfdiv_text"><label>Last Name</label><input type="text" placeholder="Enter Last Name" name="first_golfer_last_name" value="" title="" class="validate['required']" size="30" maxlength="150">
<div class="clear"></div><div id="error-message-first_golfer_last_name"></div></div><div style="" id="first_golfer_email1_container_div" class="ccms_form_element cfdiv_text"><label>Email Address</label><input type="text" placeholder="Enter Email Address" name="first_golfer_email" value="" title="" class="validate['required','email']" size="30" maxlength="150">
<div class="clear"></div><div id="error-message-first_golfer_email"></div></div><div style="" id="first_golfer_men_size1_container_div" class="ccms_form_element cfdiv_select"><label>Men Size</label><select name="first_golfer_men_size" title="" class="" size="1">
<option value="Select">Select</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="X Large">X Large</option>
<option value="XX Large">XX Large</option>
</select>
<div class="clear"></div><div id="error-message-first_golfer_men_size"></div></div><div style="" id="first_golfer_women_size1_container_div"...

JavaScript

$('#amount').change(function() {		
    			var arr = ['first','second','third','fourth'];
				var count = 0;
					if(this.value == 'Select'){
						$("#amount_paid").val(0);
						$(".addtional_golfers").hide();
                        
                        jQuery.each( arr, function( i, val ) {                                                  
                         	$("#"+val+"_row").hide();
                        });
						
						//Remove                        
                        jQuery.each( arr, function( i, val ) {
							//var inputname = val+'_golfer_name';
                           // var inputlastname = val+'_golfer_last_name'; 
                           // var inputemail = val+'_golfer_email';
                            var arr1 = [val+'_golfer_name',val+'_golfer_last_name',val+'_golfer_email'];
                            jQuery.each( arr, function( i, val ) {
                                tt = document.getElementsByName(val)[0]
                                tt.setAttribute('class',"");					   
						        tt.value = ''
                            })
								//formCheck_golf_registration_payment.dispose(document.getElementsByName(inputname)[0]);							
							//$("input[name='"+inputname+"']").val("");								
								
						/*	var inputlastname = val+'_golfer_last_name';   					
							document.getElementsByName(inputlastname)[0].setAttribute('class',"");						
							formCheck_golf_registration_payment.dispose(document.getElementsByName(inputlastname)[0]);
							$("input[name='"+inputlastname+"']").val("");
							
							var inputemail = val+'_golfer_email'; 						
							document.getElementsByName(inputemail)[0].setAttribute('class',"");						
							formCheck_golf_registration_payment.dispose(document.getElementsByName(inputemail)[0]);
							$("input[name='"+inputemail+"']").val("");	*/						
                        });
                        
					}
                    if(this.value ==...