Установка значения ячеек в таблице на основе всплывающего окна

У меня есть таблица данных и кнопка в последнем столбце, называемом "обновление".

Обновление открывает всплывающее окно модели, заполняет его содержимым строки, в которой находится кнопка, и позволяет вводить данные.

Я хочу поместить новые значения, введенные во всплывающее окно обратно в строку.

Часть моего стола выглядит так:

<table class="table table-hover table-bordered tablesorter" id="mainTable">
<thead><tr><th>Reset</th><th>Relationship</th><th>Family</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Phone#</th><th>Status&nbsp&nbsp&nbsp</th><th>Arrived?</th><th>Update</th></tr></thead><tbody><tr><td><div><button class="btn btn-primary myButton" disabled="disabled" id="resetButton" data-id="Samuel Rahimi">Reset</button></div></td><td id=relationship>Friend</td><td id=personName>Samuel Rahimi</td><td id=fname>Samuel</td><td id=lname>Rahimi</td><td id=email>[email protected]</td><td id=phone>1-212-555-1212</td><td id=Status> </td>
<td><div><button class="btn btn-primary myButton" id="updateButton" data-fname="Samuel" data-lname="Rahimi" data-email="[email protected]" data-phone="1-212-555-1212" data-note="" data-id="Samuel Rahimi">Update</button></div></td></tr>

Вот сценарий jquery для установки значений в модальном режиме:

  <script>
$(function() 
{
$('button#updateButton').on('click', function (e) {
    var getIdFromRow = $(this).data('id');
    console.log(getIdFromRow)
    var x = $(this).data('fname')
    console.log(x)
    $('#newAttendeeFname').val($(this).data('fname'))
    $('#newAttendeeLname').val($(this).data('lname'))
    $('#newAttendeeEmail').val($(this).data('email'))
    $('#newAttendeePhone').val($(this).data('phone'))
    $('#newAttendeeNote').val($(this).data('note'))         
    $('#addAttendeeModal').modal('show')
    }
)
}


)
</script>

И вот моя попытка вернуть содержимое модальной строки в строку таблицы:

<script>
//
// This is the function that is called when the button for a new attendee is clicked
//
$(function() 
    {
        $('button#addAttendeeSubmit').on('click', function (e) {

            fname = document.getElementById ("newAttendeeFname").value
            lname = document.getElementById ("newAttendeeLname").value
            email = document.getElementById ("newAttendeeEmail").value
            note  = document.getElementById ("newAttendeeNote").value
            phone = document.getElementById ("newAttendeePhone").value

            newInfo = 'fname='+fname+'&lname='+lname+'&email='+email+'&phone='+phone+'&note='+note+'&action=updateAttendee'
            // for testing we can alert the variables 
            //alert(newInfo)
            console.log(newInfo)
                    // just put HELLO in there for now
            $(this).find("td#relationship").html('HELLO')


            // Call the php function to update the database
            $.ajax({type: "GET", url:"EventCheckInFunctions.php", data: newInfo})
            // refresh the page - good time to pick up any changes from DB
            //location.reload(true);
            // Really remove the modal so that values will all be reinitialized
            //$('#addAttendeeModal').remove();
            })
    }
)
</script>

Я пробовал различную находку, ближайшую и т.д....

Любые мысли (и извините за стол, похожий на такой беспорядок, я сделал источник просмотра, чтобы получить его, поскольку он фактически сгенерирован с помощью php)