用户更改某些输入后的表副本

Question

我有一些带有输入字段的表，用户可以在其中输入输入。用户输入并单击添加按钮。必须使用用户输入字段完成。

我希望在用户通过单击按钮更改字段后显示表的精确副本。

＆＃13;

＆＃13;

function duplicate(val)
	{
		
		
		 
		 var editTable=$('#editable').html()  
		  
		 var totalGarments=$('#totalGarments').val()		 
		  
		 test = parseInt(totalGarments)+1
		 
		 $('#totalGarments').val(test)	
		 
		 var testVal=$('#totalGarments').val()		
 
		 var duplicatVal= parseInt(val)+1
		
		 var selectOtmGarmentsHtml=$('#otmgarments'+val).html()
		 var selectOtmColorsHtml=$('#otmcolors'+val).html()
		 var selectOtmSizeHtml=$('#otmsize'+val).html()
		 

		 $('#editable'+val).after("<table cellpadding='0' cellspacing='0' border='0' class='table table-striped table-bordered' id='editable"+testVal+"'><thead><tr><td>Garments</td><td>Color</td><td>Size</td> <td>Quantity</td> <td><span onclick='addNew("+testVal+")' class='btn btn-sm block btn-success'>Add</span></td> </tr> <tbody>  <tr><td><select class='form-control' name='otmgarments[]' id='otmgarments"+testVal+"'>"+selectOtmGarmentsHtml +"</select></td> <td><select class='form-control' name='otmcolors[]' id='otmcolors"+testVal+"'>"+selectOtmColorsHtml +"</select>   </td> <td><select class='form-control' name='otmsize[]' id='otmsize"+testVal+"'>"+selectOtmSizeHtml +"</select>  </td> <td> <input type='text' value='' name='otmquantity[]' id='otmquantity"+duplicatVal+"' class='form-control'></td>   <td><span onclick='duplicate("+testVal+")' class='btn  block btn-sm btn-danger'>Duplicate</span></td></tr> </tbody> </table>")
		 	 
	
				
		var garmentSearch=$('#otmgarments'+val).val()
		var colorSearch=$('#otmcolors'+val).val()
		var sizeSearch=$('#otmsize'+val).val()
		var quantityValue=$('#otmquantity'+val).val()
		
		
		 
		$('#otmgarments'+duplicatVal+' option[value='+garmentSearch+']').attr('selected',true);
		$('#otmcolors'+duplicatVal+' option[value='+colorSearch+']').attr('selected',true);
		$('#otmsize'+duplicatVal+' option[value='+sizeSearch+']').attr('selected',true);
		$('#otmquantity'+duplicatVal).val(quantityValue)
		
		
		
	}

＆＃13;

<div class="form-group" >
                          <label class="col-sm-2 control-label">Quantity</label>
                          <div class="col-sm-10">
						  <input type="text" name="totalGarments" id="totalGarments" value="1">
						  
                            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="editable1">
							
							  <thead>
                                <tr>
                                  <td>Garments</td>
                                  <td>Color</td>
                                  <td>Size</td>
                                  <td>Quantity</td>
                                  <td><span onclick='addNew(1)' class="btn btn-sm block btn-success">Add</span></td>
                                </tr>
                              </thead>
							  
                              <tbody>
							  
							    <tr>
                                  <td>
								  
								   
									<select class="form-control" name="otmgarments[]" id="otmgarments1" >
											<option value="AZ">Shirt</option>
											<option value="CO">Pant</option>
											<option value="ID">T-Shirt</option>
											<option value="MT">Sports Wear</option>
											<option value="NE">Jeans</option>							
									</select>
									
									
                                </td>
								
								
                                 <td>
									   <select class="form-control" name="otmcolors[]" id="otmcolors1">
											<option value="Red">Red</option>
											<option value="Blue">Blue</option>
											<option value="White">White</option>
											<option value="Purple">Purple</option>
											<option value="Green">Green</option>							
									  </select>
									  
									  
                                </td>
							  
                                <td>  
										<select class="form-control" name="otmsize[]" id="otmsize1">
                                          <option value='xs'>XS</option>
                                          <option value='s'>S</option>
                                          <option  value='m'>M</option>
                                          <option  value='l'>L</option>
                                          <option  value='xl'>XL</option>
                                          <option  value='xxl'>XXL</option>
                                        </select>
										
								  </td>
										
										
                                  <td><input type="text" value="1500" name="otmquantity[]"  id="otmquantity1" class="form-control" ></td>
								  
                                  <td><span  id="tab1" onclick="duplicate(1)" class="btn  block btn-sm btn-danger">Duplicate</span></td>
								  
								 </tr>
								
								
                               </tbody>	
							   
                            </table>
							
							
                          </div>						  
                        </div>

＆＃13;

＆＃13;

＆＃13;