JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
								 <form name="edc_name">
																	
									<ul class="row">
									  <li class="col-md-12">
									  <select name="edc_name" class="edc_name">
									  <option value="" >Cbe</option>
             <option value="1" selected>Erode</option>                       
									  </select>  
									  </li>
									  <span class="ecaddingspan" data-value="0">
									  <li class="col-md-3 marginlf">
										<input type="text" placeholder="Machine Description" class="form-control" name="machine_description">
									  </li>
									  <li class="col-md-2 marginlf">
										<input type="text" placeholder="Capacity" class="form-control" name="capacity">
									  </li>
									  <li class="col-md-2 marginlf">
										<input type="text" placeholder="Voltage Level" class="form-control" name="voltage_level">
									  </li>	  
									  <li class="col-md-3 marginlf">
									  <select name="typeofpower">
         <option value="" >wimd</option>
             <option value="1" selected>Soalr</option>                       
									  </select>  
									  </li>	
									 
									  <li class="col-md-1 marginlf add_newbtn">
										<a class="btn btn-green addmachinerow" href="javascript:;" ><i class="fa fa-plus"></i>Add </a>
									  </li>					
									   </span>
									 
									  <!-- add child here-->
									  <span class="edcparent" data-value="1"></span>
									  <!-- add child here-->
									  
									  <li class="col-md-6 bnone"> <a href="javascript:;" class="btn-new add_edcdetails">Total clone</a> </li>
									  <li class="col-md-2 bnone"> <a href="javascript:;" class="btn-new cancel_edcdetails">Total this Delete</a> </li>
									  
									</ul>	
									
									<hr/>
									
								  </form>

JavaScript

$(document).ready(function(){
		$('.addmachinerow').on('click',function(){
				
		var edcname =  $('.edc_name option:selected').val();
		var machine_description =   $("input[name='machine_description'").val();
		var capacity =   $("input[name='capacity'").val();
		var voltage_level =   $("input[name='voltage_level'").val();
		var powertype =  $("select[name='typeofpower'").val();
		var edcautovalue = $('.ecaddingspan').attr('data-value');

	//if($('#bank_increment').html() == '')  $('#bank_increment').html('0');   else  $('#bank_increment').html(parseInt($('#bank_increment').html())+1);

	//if($('#bank_clickededit').html() == '') var bank_increment =  $('#bank_increment').html(); else  var bank_increment = $('#bank_clickededit').html();
	
		
	$('.ecaddingspan').clone().appendTo('.edcparent');
	//$('.bankname, .bankbranch , .IFSCcode , .bankaccno , .accsincefrom').val('');

	 var edc_details = {'edcname' : edcname, 'machine_description' : machine_description, 'capacity' : capacity, 'voltage_level' : voltage_level, 'powertype' : powertype }
	//$('.bank_details_array').append(JSON.stringify(bank_details)+'&&');
		});
	});