passing data to a bootstrap modal from an ajax call

Question

I have read several posts asking the similar question, but I am still having a hard time getting the job done. I really just want my modal to have dynamic data. This is what I currently have:

Function to populate the table with data:

function getHitch(){    
$.getJSON(
    "..localhost/HitchBoard/test.txt",
    function(data) {  
        var table = "<thead><tr><th><span>Flight Date</span></th><th><span>Flight Time</span></th><th><span>From</span></th><th><span>To</span></th>"+
                    "<th><span>Aircraft</span></th><th><span>Pets</span></th><th><span>Children</span></th></tr></thead><tbody>";

        $.each(data, function(i,item) {
         var date = new Date(item.flight.flightDate);

            table += '<tr>';
            table += '<td id="">'+date.toDateString()+'</td>';
            table += '<td>'+date.toTimeString()+'</td>';
            table += '<td>'+item.flight.fromAirport.name+'</td>';
            table += '<td>'+item.flight.toAirport.name+'</td>';
            table += '<td>'+item.flight.requestedAircraft.typeName+'</td>';
            table += '<td>'+item.petsAllowed+'</td>';
            table += '<td>'+item.childrenAllowed+'</td>';
            table += '<td><button class="open-AddBookDialog btn btn-primary" data-toggle="modal" data-target="#myModal">Accept Flight</button></td>';

            table += '</tr>';
        });
        table += '</tbody>';
        $("#keywords").append(table).tablesorter();
    }
);

}

modal

        <div class="modal fade" id="myModal" 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-hidden="true">&times;</button>
                <h2 class="modal-title" id="myModalLabel">Flight: From: KHPN -  To: KHPN</h2>
              </div>
              <div class="modal-body" id="modalBody">

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Message Member</button>
                <button type="button" class="btn btn-primary">Accept Flight</button>
              </div>
            </div>
          </div>
        </div>

onClick

$(document).on("click", ".open-AddBookDialog", item, function () {
    var modal=item.flight.fromAirport.name;
    $("#modalBody").append( modal );
});

I believe I have to pass the data to the onClick some how? But I am having trouble trying to get the job done.

Note: the rest of the table loads properly and there is a button to the modal that is created for each row as well. Just when I click to open the modal, the info is wrong