How to iterate through a datatable retrieve a row and display on a modal text field on button click using ajax

<script type="text/javascript">
$(document).ready(function () {

    var table = $("#tblAppointment").DataTable();
    $("#UpdateButton").click(function () {

        $.ajax({
            url: '/Appointment/EditPatientAppointment/',
            type: "POST",
            data: JSON.stringify({ AppointmentIdEdit: $("#AppointmentIdEdit").val(), appointmentDate: $(".datetimepickerEdit").val(), patientRegNo: $("#patientRegNoEdit").val(), reasons: $("#reasonsEdit").val() }),
            cache: false,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (_data) {
                $(".spina").hide();
                //$("#patientRegNo").text(_data.MatricRegNo + " " + _data.PatientName)
                if (_data.f !== undefined) {
                    swal({
                        title: "Failed!",
                        text: _data.f,
                        type: "info"
                    });
                    table = $("#tblAppointment").DataTable();
                    return false;
                }
                else {
                    swal({
                        title: "Success!",
                        text: _data.s,
                        type: "success"
                    });
                }
                table = $("#tblAppointment").DataTable();
               // return false;

                var arr = $.map(JSON.parse(_data.data), function (el) { return el });

                if (arr.length === 0) {
                    swal({
                        title: "No Record Found!",
                        text: _data.f,
                        type: "info"
                    });
                    table = $("#tblAppointment").DataTable();
                    return false;
                }
                table.clear();
                table.destroy();
                $('#tblAppointment').dataTable({
                    data: arr,
                    columns: [
                        { "data": "MatricRegNo" },
                        { "data": "PatientName" },
                        { "data": "EntryDate" },
                        { "data": "AppointmentDate" },
                        { "data": "Reasons" },
                        {
                            "data": function (data, type, row, meta) {
                                return '<span class="btn btn-info btn-sm edit" data-toggle="modal" data-target="#modal-Edit"></span>';

                                //My code to retrieve and display on modal text fields starts here

                                $(".editA[data-target='#modal-Edit']").click(function () {
                                    var columnHeadings = $("thead th").map(function () {
                                        return $(this).text();
                                    }).get();
                                    columnHeadings.pop();
                                    var columnValues = $(this).parent().siblings().map(function () {
                                        return $(this).text();
                                    }).get();
                                    var myModal = $('#modal-Edit');
                                    $('#AppointmentIdEdit', myModal).val(data.MatricRegNo);
                                    $('#patientRegNoEdit', myModal).val(data.MatricRegNo);
                                    $('.appointmentDateEdit', myModal).val(data.AppointmentDate);
                                    $('#reasonsEdit', myModal).val(data.Reasons);
                                    console.log("Column Values: " + data.Reasons);

                                    myModal.modal({ show: true });
                                    return false;
                                });

                                //My code to retrieve and display on modal text fields ends here

                            }
                        }
                    ],
                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel',
                        {
                            extend: 'pdfHtml5',
                            orientation: 'Portriat',
                            pageSize: 'A4'
                        }
                    ]
                });
                table = $("#tblAppointment").DataTable();
            }
        });
    });
});

<div class="modal fade" id="modal-Edit">
                    <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">×</span>
                                </button>
                                <h4 class="modal-title">Edit Appointments</h4>
                            </div>
                            @using (Html.BeginForm())
                            {                                
                                <div class="modal-body">

                                    <div class="form-horizontal">
                                        <div class="form-group">
                                            <label id="lblAppointmentIdEdit" class="control-label col-md-2" style="display:none;">AppointmentId:</label>
                                            <div class="col-md-10">
                                                <input type="text" value="" id="AppointmentIdEdit" name="AppointmentIdEdit" class="form-control appointmentIdEdit" style="display:none;" />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label id="lblPatientRegNoEdit" class="control-label col-md-2">RegNo:</label>
                                            <div class="col-md-10">
                                                <input type="text" value="" id="patientRegNoEdit" name="patientRegNoEdit" class="form-control patientRegNoEdit" readonly/>

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label id="appointmentDateEdit" class="control-label col-md-2">Date:</label>
                                            <div class="col-md-10">
                                                <div class='input-group date' id='datetimepickerEdit'>
                                                    <input type='text' class="form-control datetimepickerEdit" id="appointmentDateEdit" name="appointmentDateEdit" value="" />
                                                    <span class="input-group-addon datetimepicker-addonEdit">
                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label id="lblReasonsEdit" class="control-label col-md-2">Reason(s):</label>
                                            <div class="col-md-10">
                                                <textarea rows="4" cols="50" id="reasonsEdit" name="reasonsEdit" class="form-control reasonsEdit"></textarea>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            }
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                                <button type="submit" id="UpdateButton" name="UpdateButton" class="btn btn-primary update">Update</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>