使用动态创建的文本框中的数据创建表行时出现问题

Question

我正在使用引导程序4，并使用Jquery在单击按钮时创建动态texbox。现在，我试图将数据动态单击按钮添加到html表，并添加新行，我使用Jquery Append方法。我不是jquery中最好的。

我尝试了Join和split方法。

我的问题是，它仅适用于我的第一行，但不断增加。而且我不知道如何添加和添加新表行。

  <div class="container-fluid">
    <div class="card">

  <div class="card-body">
    <h5 class="card-title">Bagagetransport</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   <div class="control-group">
        <div class="inc">

              <input id="btAdd" style="font-size:20px !important; margin-left:5px;margin-top:5px;" class="btn btn-info" type="button" name="append" value="+" />
               <br /><br />
           <div style="padding:5px;" class="row">

                <div style="max-width:140px;" class="col-2"><input autocomplete="off" id="txtDato" type="text" class="form-control datepicker" name="textbox" placeholder="Dato"/> </div>
                <div class="col-2"><input type="text" id="txtAntalbg" class="form-control" name="text" placeholder="Antal Bagage"/></div>
               <div class="col-2"><input id="txtStedAfh" type="text" class="form-control" name="textbox" placeholder="Sted navn"/> </div>
                <div class="col-2"><input id="txtVejnavn" type="text" class="form-control" name="text" placeholder="Vejnavn afh"/></div>
               <div class="col-2"><input id="txtStednavnAfg" type="text" class="form-control" name="textbox" placeholder="Sted navn"/> </div>
                <div class="col-2"><input id="txtVejnavnAfl" type="text" class="form-control" name="text" placeholder="Vejnavn aflev"/></div>
              </div>





        </div>
        </div>
        <br />
      <div id="main">

        </div>
   <input type=button class="bt" onclick="GetTextValue()" id=btSubmit value=Gem />
     <table class="table table-striped table-bordered" id="tbl">  
                            <tr>  
                                <th>Dato</th>  
                                <th>Antal Bagage</th>  
                                <th>Price</th>  
                                <th>d</th>  
                                <th>f/th>  
                                <th>g</th> 
                            </tr>  
                        </table>  
    </div>
  </div>
</div>

 <script>
    $(document).ready(function() {

        var iCnt = 0;

        var container = $(document.createElement('div')).css({

        });

        $('#btAdd').click(function() {
            if (iCnt <= 10) {

                iCnt = iCnt + 1;

                // ADD TEXTBOX.
                $(".inc").append('<div style="padding:5px;" class="row">\
                <div style="max-width:140px;" class="col-2"><input autocomplete="off" id=txtDato' + iCnt +' class="form-control datepicker" type="text" name="textbox" placeholder="Dato"></div>\
                 <div class="col-2"><input id='+ "txtAntalbg" + iCnt +' style="min-width:65px;" class="form-control" type="text" name="text" placeholder="Antal Bagage"></div>\
                  <div class="col-2"> <input id='+ "txtStedAfh" + iCnt +' class="form-control" type="text" name="textbox" placeholder="Sted navn"></div>\
                 <div class="col-2"><input id='+ "txtVejnavn" + iCnt +' class="form-control" type="text" name="text" placeholder="Vejnavn afh"></div>\
                  <div class="col-2"> <input id='+ "txtStednavnAfg" + iCnt +' class="form-control" type="text" name="textbox" placeholder="Sted navn"></div>\
                 <div class="col-2"><input id='+ "txtVejnavnAfl" + iCnt +' class="form-control" type="text" name="text" placeholder="Vejnavn aflev"></div>\
                <a style="max-height: 40px;" href="#" class="remove_this btn btn-danger">-</a>\
            </div>');

                // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
                if (iCnt == 1) {
                    var divSubmit = $(document.createElement('div'));
                    $(divSubmit).append('');
                }

                // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
                $('#main').after(container, divSubmit);
            }
            // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
            // (20 IS THE LIMIT WE HAVE SET)
            else {      
                $(container).append('<label>Reached the limit</label>'); 
                $('#btAdd').attr('class', 'bt-disable'); 
                $('#btAdd').attr('disabled', 'disabled');
            }
        });




    });

    // PICK THE VALUES FROM EACH TEXTBOX WHEN MY BUTTON IS CLICKED.
    var divValue, values = '';

    function GetTextValue() {
        $(divValue) 
            .empty() 
            .remove(); 

        values = '';

        $('.form-control').each(function() {
            divValue = $(document.createElement('tr')).css({
                padding:'5px', width:'1000px'
            });
            values += "<td>" + this.value + "</td>"
        });



        $(divValue).append(values + '');
        $('#tbl tbody').append(divValue);

    }
     $('body').on('focus',".datepicker", function(){
    $(this).datepicker();
});
</script>
     <script>
  $( function() {
    $( ".datepicker" ).datepicker();
        });

         $(document).on('click', '.remove_this', function() {
        $(this).parent().remove();
        return false;
        });

  </script>