как динамически добавить разделение текстовых полей в разные строки динамически

Question

У меня есть данные с тремя переменными, как показано ниже.

ProductName: "FGC 101 127;vSAPC;vSGSN-MME;FGC 101 329/15BV"
Release: "R1A;1.3;v1.2399999;R1A"
Vendor: "Cisco;Cisco;Cisco;Cisco".

А в интерфейсе у меня есть div, как показано ниже, с одной строкой поставщика, названия продукта и выпуска.

как я могу динамически заполнять данные в текстовых полях при динамическом добавлении строк на основе количества названий продуктов. Как и в предыдущем примере, у меня есть 4 продавца, поэтому я должен добавить еще 3 строки и заполнить данные соответственно.

Ниже мои ожидания.

Я пробовал что-то вроде этого .. Я новичок в jquery .. Пожалуйста, помогите

var responseVnfVendor = response.vnfVendor;
								   if(responseVnfVendor !=null && responseVnfVendor.length > 0) {
									   var vnfVendorArray = responseVnfVendor.split(";");
								       var divCount = 1;
								       for (var i = 0; i < vnfVendorArray.length; i++) {
								           if(vnfVendorArray[i]!= "" && vnfVendorArray[i].length > 0) {
								                if(i == 0) {
								                       $("#vnfVendor"+divCount).val(vnfVendorArray[i]);
								                      // $("#testingTolURL"+divCount).prop('disabled', false);
								                      // $("#testingTolFile"+divCount).prop('disabled', true);
								                } else {
								                		var divHTML = '<div class="col-md-12" id="vnfSection'+divCount+'">'+
								                        '<div class="col-md-3 col-sm-3 col-xs-3">'+
								                        '<label class="control-label">Vendor </label>'+
								                        '<input type="text" class="form-control" id="vnfVendor'+divCount+'" />'+                
								                        '</div>'+
								                        '<div class="col-md-3 col-sm-3 col-xs-3">'+
								                        '<label class="control-label">Product Name </label>'+
								                        '<input type="text" class="form-control" id="vnfProductName'+divCount+'" />'+                
								                        '</div>'+
								                        '<div class="col-md-3 col-sm-3 col-xs-3">'+
								                        '<label class="control-label">Release </label>'+
								                        '<input type="text" class="form-control" id="vnfRelease'+divCount+'" />'+  
								                        '</div>'+
								                        '<div>'+
								                        '<button  class="btn btn-action remove" identifier="'+divCount+'" id="vnfDelete'+divCount+'">Delete</button>'+
								                        '</div>'+
								                        '</div>';   
								                    	$("#multipleVnf").append(divHTML);
								                    	$("#noOfVnf").val(divCount);
								                                                                           
								                      /* $(".testingTolFile").bind("change",function(){
								                             function_testingTolFile(this);
								                       });
								                       $(".testingTolClear").bind("click",function(){
								                             function_testingTolClear(this);
								                       });
								                       $(".testingTolURL").bind("change",function(){
								                             function_testingTolURL(this);
								                       });*/
								                }
								               // $("#testingTolFileUploadRemoveButton").hide();
								                divCount++;
								           }                           
								       }
								       if(vnfVendorArray.length < 10 && vnfVendorArray.length > 1) {
								    	   $("#addVNFButton").show();
								    	   
								       } else if(testingTolArray.length == 10) {
								    	   $("#addVNFButton").hide();
								    	   
								       }
								   }

 <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title"> <a role="button" data-toggle="collapse" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree" class="trigger"> VNF </a> </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree" aria-expanded="true">
          <div class="panel-body">
          <div class="col-md-12 " style="margin:10px 0; float: right"> 
              <button class="btn btn-action  " type="submit" style="margin:3px 0;" id="addVNFButton">+ Add VNF</button>
            </div>
            <div id=multipleVnf>
            <input id="noOfVnf" type="hidden" value="1"/>
            <div  class="col-md-12 " id="vnfSection1">
              <div class="col-md-3 col-sm-3 col-xs-3">
                     <label class="control-label">Vendor </label>
                <input type="text" class="form-control" id="vnfVendor1"  />
              </div>
              <div class="col-md-3 col-sm-3 col-xs-3">
              <label class="control-label">Product Name</label>
                <input type="text" class="form-control" id="vnfProductName1" />
              </div>
              <div class="col-md-3 col-sm-3 col-xs-3">
              <label class="control-label">Release</label>
                <input type="text" class="form-control" id="vnfRelease1" />
              </div>             
             </div>
              </div>                    
            </div>
        </div>
      </div>

Answer 1

Я реализовал те же функции, это может быть полезно для вас, пожалуйста, обратитесь ниже код

function AddTextbox() {
            var TableRowCount = $('#tblAddTetxbox >tbody >tr').length;

            var newTextBoxDiv = $(document.createElement('tr'))
                .attr("id", 'TextBoxDiv' + (TableRowCount + 1))
                .attr("class", 'row');

            TableRowCount += 1;

            var rowId = 'TextBoxDiv' + TableRowCount;
            var rowlblId = 'lbl' + TableRowCount;
            var rowTextboxlId = 'textbox' + TableRowCount;
            var btnUp = "btnUp" + TableRowCount;
            var btnDown = "btnDown" + TableRowCount;
            var btnRemove = "btnRemove" + TableRowCount;


            newTextBoxDiv.after().html(
                '<td class="form-group" style="border-top: 0px solid #ddd !important;text-align:center">' +
                    '<div class="col col-sm-5">' +
                    '</div>' +
                '</td>' +
                '<td class="form-group" style="border-top: 0px solid #ddd !important;">' +
                    '<div class="col col-sm-5">' +
                        '<input type="text" class="form-control class1" name="TitleField" value="" id="' + rowTextboxlId + '" />' +
                    '</div>' +
                '</td>');

            newTextBoxDiv.appendTo("#tblAddTetxbox");

            SetRowCount();
    }
    
    function SetRowCount() {
            debugger
            var table = document.getElementById('tblAddTetxbox');
            for (var i = 0; i < table.rows.length; i++) {
                var firstCol = table.rows[i].cells[0];
                $("#tblAddTetxbox tbody tr td:nth-child(2) button:nth-child(2)").css('opacity', '');
                $("#tblAddTetxbox tbody tr td:nth-child(2) button:nth-child(1)").css('opacity', '');
                $("#tblAddTetxbox tbody tr:first td:nth-child(2) button:nth-child(1)").css('opacity', '0');
                if (table.rows.length>1) {
                    $("#tblAddTetxbox tbody tr:last td:nth-child(2) button:nth-child(2)").css('opacity', '0');
                }

                if (i===0) {
                    firstCol.innerHTML = "Picture Number";
                }
                else {
                    firstCol.innerHTML = i;
                }
            }
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
                        <div id='TextBoxesGroup' class="col col-sm-12">
                            <table id="tblAddTetxbox" class="table table-borderless">
                                <thead>
                                    <tr class="row">
                                        <th class="col col-sm-4" style="text-align: center;">Picture Number</th>
                                        <th class="col col-sm-8" style="padding-left: 23px;">Title</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-sm-12">
                            <button class="btn btn-primary" onclick="AddTextbox()" style="margin-left: 100px;">Add</button>
                        </div>
                    </div>