hot to add fields dynamically by cliking on multiple checkbox

I want to add two fields dynamically by clicking on mutiple checkbox's checkbox. first field is label with choosen value from multiple checkbox and another one is text box to user to enter their value.

                
                
                        
                var arr = [];
                i = 0;  
                
                jQuery('#size').on('change', function() {
                        
                        alert('hi')
                        //alert(jQuery(this).val());
                        arr[i++] = jQuery(this).val();
                        
                        alert(arr)
                        
                });
                
                
                
        

  
            <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>