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

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;

    // change this code around.  first we create a new javascript object with just the new row
    var $new_row = $("<tr>" +
        "<td><input type='text' disabled class='form-control' value='" + Text + "' /></td>" +
        "<td><select></select></td>" +
        "</tr>");
    // now append that as before:
    $("#tblWorkpack tbody").append($new_row);
    
    // the following line was wrong - this(...) doesn't mean anything
    // var $responsibleUsersDropdown = this("#tblWorkpack tbody tr td:nth-child(2)");
    // anyhow change that line so that we look at the $new_row and find the select within it
    var $responsibleUsersDropdown = $new_row.find('select');

    // comment out some of the code below and simulate the ajax call:
    /*
    var Url = '@Url.Action("FindUser","Home")';
    $.post(Url, {
        Functionid: Value
    }, function (data) { */
    // simulate data result from ajax
    var data = [{
        UserID: '1',
        FullName: 'john doe'
    }, {
        UserID: '2',
        FullName: 'jane doe'
    }];

    $responsibleUsersDropdown.empty();
    for (var i = 0; i < data.length; i++) {
        // you had the wrong variable name below (forgot the $)
        $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;

}