How to add two text boxes texts to html table with button click and increment rows dynamically?

Question

I have a drop-down list, two textboxes, add button and a table. There are two things which I need to do. First thing is, fill one textbox with the drop-down list's selected text and the user will enter a value in second text box. I could find a solution for that part and it is done. The second part is, I need to add the texts in those two textboxes to an HTML table with a button click in javascript or jquery. The table rows must increase by one with the button click and textboxes texts. Can someone please help me. I am new to scripts and that is why I find it difficult to do this. Thanks in advance. Below is what I have done already.

Two text boxes and Add Button with the Table.

         <div class="form-group">
                <div class="col-md-2">
                </div>
                    <div class="col-md-2">
                        @Html.Editor("CompTxt", new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @style = "width:80px" } })
                    </div>
                    <div class="col-md-2">
                        @Html.Editor("ValTxt", new { htmlAttributes = new { @class = "form-control", @style = "width:80px" } })
                    </div>
                <div class="col-md-2">
                    <input class="btnAdd btn btn-primary" style="width:80px" type="button" name="name" value="Add" onclick="insertRow();"/>
                </div>
              </div>
              <div class="form-group">
                    <div class="col-md-2"></div>
                    <div class="col-md-7">
                        <table id="CompTable" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>
                                        @Html.DisplayName("Description")
                                    </th>
                                    <th>
                                        @Html.DisplayName("Value")
                                    </th>

                                    <th>
                                        @Html.DisplayName("Action")
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        @Html.Editor("CompDes", new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @style = "width:80px" } })
                                    </td>
                                    <td>
                                        @Html.Editor("Val", new { htmlAttributes = new { @class = "form-control", @style = "width:80px" } })
                                    </td>

                                    <td>
                                        @Html.ActionLink("Remove", "RemoveRow")
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

Javascript code to copy dropdown text to textboxes.

<script>//copy dropdown text to textbox
$(document).ready(function () {
    $('#ddlCompositions').change(function () {
        $('#CompTxt').val($(this).find("option:selected").text())
    });
  });
 </script>

Answer 1

you can find answers in the next articles

• append a row to your table Add table row in jQuery

• select and edit table cells How to select and change value of table cell with jQuery? or Using jQuery to edit individual table cells

• button click event handling How to Handle Button Click Events in jQuery? or https://api.jquery.com/click/