Transfer Table TD in textbox

This is the way on how I populate data in my table.

<script>
function GenerateTable() {
    <? var data = getData(); ?> 

    var table = document.getElementById("TableContainer");

    <? for (var i = 12; i < data.length; i++) { ?>
      var getval;
      var row = table.insertRow(-1);
      var row_did = row.insertCell(0);
      var row_area = row.insertCell(1);
      var row_cusname = row.insertCell(2);
      var row_pic = row.insertCell(3);
      var row_remarks = row.insertCell(4);
      var row_status = row.insertCell(5);
      var row_docudate = row.insertCell(6);
      var row_button = row.insertCell(7);

      row_did.innerHTML =      '<td  id="dataid" class="dataid">'+ <?= data[i][0] ?> + '</td>';
      row_area.innerHTML =     '<td  id="area" class="area">'+ <?= data[i][1] ?> +'<td>';
      row_cusname.innerHTML =  '<td  id ="cusname" class="cusname">' + <?= data[i][2] ?>  +'<td>';
      row_pic.innerHTML =      '<td  id ="cic" class="cic">' + <?= data[i][3] ?>  +'<td>';
      row_remarks.innerHTML =  '<td  id ="remarks" class="remarks">' + <?= data[i][4] ?>  +'<td>';
      row_status.innerHTML =   '<td  id ="status" class="status">' +<?= data[i][5] ?>  +'<td>';
      row_docudate.innerHTML = '<td  id ="docdate" class="docdate">'+ <?= data[i][6] ?>  +'<td>';
      row_button.innerHTML =   '<td><img id = "selectdata" class = "click-to-select" src="https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

<? } ?>
}
</script>

and this is my table where i put the data based on code above.

<table  id = "TableContainer" cellspacing="2" cellpadding="3" width ="100%" align = "center" class="hoverTable">
   <tr>
   <th  bgcolor = "darkgreen"><font color="white">#</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Area</font></th>
   <th  bgcolor = "darkgreen" width = "200px"><font color="white">Customer Name</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Person In Charge</font></th>
   <th  bgcolor = "darkgreen" width = "250px"><font color="white">Remarks</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Status</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Doc. Date</font></th>
   <th  bgcolor = "darkgreen"></th>
   </tr>
   <tr>

   </tr>
</table>

Please bear with me. this code is perfectly running and im running the code by '<body onLoad = "GenerateTable()"> how ever as what you see on my code there is a code that looks like this.

<td><img id = "selectdata" class = "click-to-select" src="https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

now it will create an image button for every row in my table and that code has a purpose and that is to transfer the data from td to textbox and other elements and here is my code for that.

<script>
$('.click-to-select').click(function() {
    var dataid = $(this).closest('tr').find('td.dataid').text();
    var area = $(this).closest('tr').find('td.area').text();
    var cusname = $(this).closest('tr').find('td.cusname').text();
    var cicoption = $(this).closest('tr').find('td.cic').text();
    var remarks = $(this).closest('tr').find('td.remarks').text();
    var statoption = $(this).closest('tr').find('td.status').text();
    var documentdate = $(this).closest('tr').find('td.docdate').text();

    $('#dataid').val(dataid)
    $('#areaoption').val(area)
    $('#cusname').val(cusname)
    $('#cicoption').val(cicoption)
    $('#remarks').val(remarks)
    $('#statoption').val(statoption)
    $('#documentdate').val(documentdate)
});
</script>

this is where the error starts when im clicking the image the row data is not transferring in my textbox whats the error?

Updated Code

<script>
function GenerateTable() {
    <? var data = getData(); ?> 

    var table = document.getElementById("TableContainer");

    <? for (var i = 12; i < data.length; i++) { ?>
      var row = table.insertRow(-1);
      var row_did = row.insertCell(0);
      var row_area = row.insertCell(1);
      var row_cusname = row.insertCell(2);
      var row_pic = row.insertCell(3);
      var row_remarks = row.insertCell(4);
      var row_status = row.insertCell(5);
      var row_docudate = row.insertCell(6);
      var row_button = row.insertCell(7);

      row_did.innerHTML =      '<td  id="dataid" class="dataid">'+ <?= data[i][0] ?> + '</td>';
      row_area.innerHTML =     '<td  id="area" class="area">'+ <?= data[i][1] ?> +'<td>';
      row_cusname.innerHTML =  '<td  id ="cusname" class="cusname">' + <?= data[i][2] ?>  +'<td>';
      row_pic.innerHTML =      '<td  id ="cic" class="cic">' + <?= data[i][3] ?>  +'<td>';
      row_remarks.innerHTML =  '<td  id ="remarks" class="remarks">' + <?= data[i][4] ?>  +'<td>';
      row_status.innerHTML =   '<td  id ="status" class="status">' +<?= data[i][5] ?>  +'<td>';
      row_docudate.innerHTML = '<td  id ="docdate" class="docdate">'+ <?= data[i][6] ?>  +'<td>';
      row_button.innerHTML =   '<td><img id = "selectdata" class = "click-to-select" src= "https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

<? } ?>

$('.click-to-select').click(function() {
    var dataid = $(this).closest('tr').find('td.dataid').text();
    var area = $(this).closest('tr').find('td.area').text();
    var cusname = $(this).closest('tr').find('td.cusname').text();
    var cicoption = $(this).closest('tr').find('td.cic').text();
    var remarks = $(this).closest('tr').find('td.remarks').text();
    var statoption = $(this).closest('tr').find('td.status').text();
    var documentdate = $(this).closest('tr').find('td.docdate').text();

    $('#dataid').val(dataid)
    $('#areaoption').val(area)
    $('#cusname').val(cusname)
    $('#cicoption').val(cicoption)
    $('#remarks').val(remarks)
    $('#statoption').val(statoption)
    $('#documentdate').val(documentdate)
});

}
</script>

TYSM