Pass Image ID to Modal with AJAX / JSON Data

Question

Update:

The duplicate answer link posted deals with binding click events to dynamically generated content - which helped, thanks. But I'm still unsure of how to pass the $row ID of dynamically generated content to a dynamically generated modal using a click event within an AJAX statement?

So essentially, where/how does the $row id go in:

<a href="#dataModal"><img class="photog-headshot" 
src="images/'+ data.Surfboards[row].Surfboard.imageName + '" alt="' + 
data.Surfboards[row].Surfboard.imageName + '"></a>

Problem:

I'm working with code from the tutorial below and incorporating it into my existing project and I'm stuck. I'm not triggering the .view_data from the href on line 18 in surfboard.js so when a surfboard placeholder image is clicked at the bottom of of the page on Nalu.live/equipment nothing from the database appears in the modal. The functionality I want is working in the 'Surfboard Name' table above the image grid. Click on the "View" button to see it in action.

I'm also getting a weird Unrecognized expression console log error?

Helpful links:

• Tutorial: PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal
• Link to my live project: Nalu.live/equipment
• Link to my github repo with all of the project code except for the DB connection
• Screenshot of mySQl database I'm working with

Main Project Files for this Issue:

equipment.php, select.php, surfboards.php, surfboard.js

Notes:

A working example is on nalu.live.equipment in the "Surfboard Name" table on the page below the carousel. If you click on the 'View' button a modal opens with the corresponding name of the surfboard row and image that are loaded from the SQL database. The code to generate the modal is in select.php.

I'm trying to incorporate the same functionality from the table into the image grid below it so I can remove the example table. When the user clicks on a surfboard placeholder image the corresponding modal opens with info that matches the database ID for that image.

The image grid is being generated by JSON/JS in surfboards.js. The surfboards.php file is creating an associative array and echoing JSON. The JS in surfboards.js is looping through the data and appending a div to #board_table in equipment.php.

The modal link is on line 18 of surfboard.js. I can't sort out the syntax to trigger the .view_data function to include the info from the DB. I've added the class="view_data" to the href but that's obviously wrong.. I'm unsure how to open the modal and trigger the click().

Image Grid HTML - added class=".view_data" to bind click event:

      <div class="flexbox_container">
        <section class="view_data" id="board_table">
          <!-- surfboards.js will publish surfboards from database here -->
        </section>
      </div>

Modal Code for Both Surfboard Table and Placeholder Images:

<!-- Ajax Database Modal Start -->
      <div id="dataModal" class="modal fade">  
        <div class="modal-dialog">  
          <div class="modal-content">  
            <div class="modal-header">  
              <button type="button" class="close" data-dismiss="modal">&times;</button>  
              <h4 class="modal-title">Surfboard Details</h4>  
            </div>  
            <div class="modal-body" id="surfboard_detail">  
            </div>  
            <div class="modal-footer">  
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
            </div>  
          </div>  
        </div>  
      </div> 

JSON Parser - surfboard.js:

//gets the JSON from our surfboards.php
$.getJSON("surfboards.php", function (data) {
  //loop through each surfboard in the JSON file and append a <div> with the surfboard information
  $.each(data.Surfboards, function (row) {
      $("#board_table").append(
        '<div class="photog-group clearfix"><figure class="cap-bot"><a href="equipment.php?id=' 
        + data.Surfboards[row].Surfboard.id 
        + '"><a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/'
        + data.Surfboards[row].Surfboard.imageName + '" alt="'
        + data.Surfboards[row].Surfboard.imageName
        + '"></a><figcaption><p>Board Name: ' 
        + data.Surfboards[row].Surfboard.boardName 
        + '<br>Year Shaped: ' 
        + data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
  });
});

AJAX View Data Trigger:

// Function that responds to 'View' button onclick on equipment.php and 
inserts information from database into modal id="dataModal" 
$(document).ready(function(){  
  $('.view_data').click(function(){  
     var surfboard_id = $(this).attr("id");  
     $.ajax({  
         url:"../select.php",  
         method:"post",  
         data:{surfboard_id:surfboard_id},  
         success:function(data){  
             $('#surfboard_detail').html(data);  
             $('#dataModal').modal("show");
             console.log(data);
         }  
     });  
  });  
});