I am having trouble filling a form with table data.The form is in a modal dialogue and I want the dialogue to popup with inputs filled when the user clicks on the glyphicon, glyphicon-pencil.

I have looked at Fill form using table data, How to fill input fields in form with data from row in html table I want to edit, jQuery dynamic fill in form fields with table data, and Automatic fill a table with data using JavaScript and JSON, and none of their solutions worked for me, so please help.
here is the modal and form code:

<div class=modal fade id=New-Employee-Modal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true>

    <div class=modal-dialog>

        <div class=modal-content>

            <div class=modal-header>

                <button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>&times;</span></button>

                <h4 class=modal-title id=myModalLabel>Employee</h4>

            </div>

            <div class=modal-body>



                <div id=data>

                    <form id=person>

                        <div class=form-group>

                            <label class=control-label>First Name:</label>

                            <input class=form-control id=FirstName name=FirstName type=text>

                        </div>

                        <div class=form-group>

                            <label class=control-label>Last Name:</label>

                            <input class=form-control id=LastName name=LastName type=text>

                        </div>

                        <div class=form-group>

                            <label class=control-label>Net Id:</label>

                            <input class=form-control id=NetId name=Netid type=text>

                        </div>

                        <div class=form-group>

                            <label class=control-label>Phone #:</label>

                            <input class=form-control id=PhoneNumber name=PhoneNumber type=tel required />

                        </div>



                        <div class=form-group>

                            <label class=control-label>Email:</label>

                            <input class=form-control id=Email name=Email type=text>

                        </div>

                        <div class=form-group>

                            <label class=control-label>Role</label>

                            <input class=form-control id=Role name=Role type=text>



                        </div>

                        <div class=form-group>

                            <label class=control-label>Active:</label>

                            <br />

                            <input name=Active type=radio value='<span class=glyphicon glyphicon-ok-circle>' /> Active

                            <br />

                            <input name=Active type=radio value='<span class=glyphicon glyphicon-ban-circle>' /> Not Active

                        </div>

                    </form>

                </div>

                <div class=modal-footer>

                    <button type=button class=btn btn-default onclick=ResetForm()>Reset</button>

                    <button type=button class=btn btn-default data-dismiss=modal>Close</button>

                    <button type=button class=btn btn-primary data-dismiss=modal onclick=AddData()>Save</button>

                </div>

            </div>

        </div>

    </div>

Here is the part of the table:

<div id=tab>

    <table class=table table-striped id=list>

        <thead>

            <tr>

                <th>First Name</th>

                <th>Last Name</th>

                <th>Net ID</th>

                <th>Phone #</th>

                <th>Email</th>

                <th>Active</th>

                <th>Role</th>

                <th>Action</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>Joel</td>

                <td>lewis</td>

                <td>lewisj</td>

                <td>333-555-3667</td>

                <td>[email protected]</td>

                <td>

                    <a id=icon-toggle class=btn-default>

                        <span class=glyphicon glyphicon-ok-circle aria-hidden=true></span>

                    </a>

                </td>

                <td>Developer</td>

                <td>

                    <span class=glyphicon glyphicon-pencil data-target=#New-Employee-Modal onclick=UpdateForm() aria-hidden=true></span>

                    <a id=icon-toggle-delete class=removebutton>

                        <span class=glyphicon glyphicon-remove aria-hidden=true></span>

                    </a>



                </td>

            </tr>

and here is the javascript:

function AddData() {

    var rows = ;

    var FirstName = document.getElementById(FirstName).value;

    var LastName = document.getElementById(LastName).value;

    var NetId = document.getElementById(NetId).value;

    var PhoneNumber = document.getElementById(PhoneNumber).value.replace(/(d{3})(d{3})(d{4})/, '$1-$2-$3');

    var Email = document.getElementById(Email).value;

    var Active = document.querySelector('input[name=Active]:checked');

    Active = Active ? Active.value : '';

    var Role = document.getElementById(Role).value;

    rows += <td> + FirstName + </td><td> + LastName + </td><td> + NetId + </td><td> + PhoneNumber + </td><td> + Email + </td><td> + Active + </td><td> + Role + '</td><td>  <span class=glyphicon glyphicon-pencil aria-hidden=true></span> <a id=icon-toggle-delete2 class=removebutton>  <span class=glyphicon glyphicon-remove aria-hidden=true></span> </a></td>';

    var tbody = document.querySelector(#list tbody);

    var tr = document.createElement(tr);



    tr.innerHTML = rows;

    tbody.appendChild(tr)



}



function UpdateForm() {



    $('span.glyphicon glyphicon-pencil').click(function() {

        //! Don't know what do here

    });



}



function ResetForm() {

    document.getElementById(person).reset();

}

here is the jsfiddle http://jsfiddle.net/neu4gh37/2/