title: Dynamically constructing bootstrap 4 modal link from inside Datatables.js plugin
body: <p>I'm using Datatables.js jquery plugin to build html tables (jquery version 3.2.1); The html table that is being generated by datatables also needs to have one of the column cells (author_id) to be a clickable link that opens a bootstrap 4 modal, and passes the unique id of the author_id to the modal. </p>
  
  <p>I'm able to (kinda) generate the href tag with all the attributes and am able to open the modal but for some reason the id's (author_id) that are being generated inside my DataTable initialization function are being displayed multiple times when I do a console.log (I put a comment before console.log in caps, to indicate where the multiples are being generated). Not sure what I'm doing wrong. Following is the code that I have:</p>
  
  <pre><code>$(document).ready(function() {
     $.ajax({
      type: "GET",
      url: "https://sonosfarm.com/prod/authors.cfc?method=Authors",
      dataType: "json",
      cache: false,
      success: function(response){
          if(response.length != 0){
              $("#authorsHiddenVar").val("");
              $("#authorsHiddenVar").val(JSON.stringify(response));
              $("#Authors").DataTable({
                  data: response,
                  columns:[
                      {
                          data: 'author_id',
                          "render": function(data, type, row, meta){
                              if(type== 'display'){
                                 data = '&lt;a  data-toggle="modal" data-
    target="#mymodal" data-backdrop="static" data-keyboard="false" 
      href="#mymodal" data-id=' + data + '&gt;' + data + '&lt;/a&gt;';
                              }
  
                          //THIS IS WHERE THE SAME UNIQUE author_id IS BEING 
                         //SHOWN MULTIPLE TIMES!
                              console.log(data);
                              return data;
                          }
                      },
                      {
                          data: 'joined_date' 
                      },
                      {data: 'country'}
                  ],
                  responsive: true,
                  order: [1, 'desc']
              });
  
          }
          else{
              console.log("There was no response from server!");
          }
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
          console.log("An Ajax server error was returned");
          console.log(XMLHttpRequest);
          console.log(textStatus);
          console.log(errorThrown);
      }
     });
  
  });
  </code></pre>
  
  <p>The second issue I'm having is parsing the href tag inside the mymodal bootstrap modal - I tried the following code but I get undefined (when I try to retrieve the value of data-id:</p>
  
  <pre><code>   var mypostid = $("#mymodal").data('id');
     console.log( mypostid );
     //GETTING ERROR HERE
  </code></pre>
  
  <p>How do I retrieve the data-id (which is unique author_id) that is being passed to modal, and show various input fields based on the data-id?</p>