如何通过单击多个复选框动态添加字段

Question

我想通过点击多个复选框的复选框动态添加两个字段。 第一个字段是一个标签，从多个复选框中选择一个值，另一个是用户输入其值的文本框。

	
	jQuery('#size').on('change', function() {
		
			
			
		
			
				var vauler=jQuery(this).val()
				
				jQuery('#mytable ').append("<tr><th id='this"+vauler+"' width='33%'> size-"+vauler+"</th>  <td><input type='text' name='sizeThis' value="+vauler+"></td> </tr>")
		
	});
	
	
	
	

  
            <div class="form-group">
              <label class="col-sm-4 control-label no-padding-right" for="form-field-1"> Sizes </label>
              <div class="col-sm-7">
                   <select id="size" class="multiselect" multiple="" name="preferred_manufacturer[]">
						<option value="1">one</option>
						<option value="2">two</option>
						<option value="3">three</option>
						<option value="4">four</option>
						<option value="5">five</option>
					</select>
              </div>
            </div>
            <div class="space-4"></div>
            
            <div class="form-group">
              <label class="col-sm-4 control-label no-padding-right" for="form-field-1">Quantity </label>
              <div class="col-sm-7">
              
				<table class="table-hover table table-bordered table-striped" id="mytable">
				  
                  	 <tr>
					       <th width="33%">size-sizeSelectedFromMultiple</th>
							<td>
								<!--<a href="SubProduct.php" class="btn btn-block btn-sm">Click New Window</a>-->
								<div class="form-group">

								<div class="col-sm-7">
								<input type="text" id="form-field-1"  name="otmcolor"  placeholder="Quantity" class="col-sm-12" />
								</div>
								</div>
								<div class="space-4"></div>

							</td>
					    </tr>
                  </table>

					
              </div>
            </div>
            <div class="space-4"></div>