JSFiddle - React, Tailwind, and code Playground

by manishie

HTML

<form> 
      <table> 
                <tbody> 
                         <tr>
                            <td class="form-group">
                                <label class="col-sm-2 control-label">Select Method Functions</label>
                                <div class="col-xs-6">
                                    <select name="fupctions" id="selectFunction" >
                                        <option>Structures</option>
                                        <option>Wing</option>
                                    </select>
                                </div>
                                <input type="button" id="btnAdd" role="button" class="btn btn-info" value="Add Button"/>
                                 <input type="button" id="btnAdd" role="button" class="btn btn-info" value="Delete Button"/>
                             </td>
                        </tr>    
                    </tbody>
                </table>
        
        
                    <table class="table table-bordered table-hover" style="width:300px" id="tblWorkpack">
                            <thead>
                                <tr>
                                    <th>Functions </th>
                                    <th>Person Responsible</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                  </table>


               <input type="hidden" name="selectedwp" id="selectedwp" />
                </form>

JavaScript

<script type="text/javascript">
            var selectedFunctions = [];

            $(document).on("click", "#btnAdd", function () {

                var functionName = document.getElementById("selectFunction");
                var Text = functionName.options[functionName.selectedIndex].text
                var Value = functionName.options[functionName.selectedIndex].value;

                $("#tblWorkpack tbody").append(
                 "<tr>" +
                 "<td><input type='text' disabled class='form-control' value='" + Text + "' /></td>" +
                 "<td><select></select></td>" +
                "</tr>");

                 var $responsibleUsersDropdown = this("#tblWorkpack tbody tr td:nth-child(2)");
              

                var Url = '@Url.Action("FindUser","Home")';
                $.post(Url, { Functionid: Value }, function (data) {
                    $responsibleUsersDropdown.empty();
                    for (var i = 0; i < data.length; i++) {
                        responsibleUsersDropdown.append('<option value?+data[i].UserId+?="">' + data[i].FullName + '</Option>');
                    }

                });

                var i = 0;
                i = i + 1;

                selectedFunctions.push(Value);

            });

            $(document).on("click", "#btnDelete", function () {
                $("#tblWorkpack tr:last").remove();
                selectedFunctions.pop();
            });

            function SetWorkpacks() {
                var tempvalue = document.getElementById('selectedwp');
                tempvalue.value = selectedFunctions;
                 
            }      
        </script>

    }