getElementsByClassName not working within a table

I am using jquery on a product list on shopify.  I know Im on the right track below but really am stuck.  This is way out of my wheel house.  Thanks in advance for your assistance

I have a huge table of products with a column for design notes which once clicked, opens a model with a table which lists the specific notes for that product.  My problem is 2-fold
     1. I can get the modal to fire no problem not using a table and using getElementByID but once I put it in a table, change the variables and change it to getElementsByClassName  or getElementsByTagName it will not work
     2.  I only want the specific notes for that product to show which I cannot make happen,  I either get all of the notes or none and I know it is because of joining issues with the initial selector that fires the modal

Initial table:

<table class="prodTable">
<tr>
<td></td>
<td>Camaro</td>
<td>96-97</td>
<td>5.7L LT1</td>
<td>1-3/4"</td>
<td>3"</td>
<td>
<p class="designNotes">6, 9, 10,</p>  <!--Insert actual note labels to retrieve proper results  -->
</td>
<td class="partno">82-1161</td>
</tr>
<tr>
<td></td>
<td>Camaro</td>
<td>98-99</td>
<td>5.7L LS1</td>
<td>1-3/4"</td>
<td>3"</td>
<td>
<p class="designNotes">2, 3, 9, </p>
</td>
<td class="partno">82-1163</td>
</tr>
<tr>
<td></td>
<td>Camaro</td>
<td>98-02</td>
<td>5.7L LS1</td>
<td>1-3/4"</td>
<td>3"</td>
<td>
<p class="designNotes">1, 4, 5,</p>
</td>
<td class="partno">82-1163</td>
</tr>
</table>

var modal = document.getElementById('designNotesModal');  
var p = document.getElementById("designNotes");    // Get the element that opens the modal
var span = document.getElementsByClassName("close")[0];   // Get the button that opens the modal
p.onclick = function() { modal.style.display = "block";}    // When the user clicks on the button, open the modal 
span.onclick = function() { modal.style.display = "none";}    // When the user clicks on <span> (x), close the modal
window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none";  }}
// When the user clicks anywhere outside of the modal, close it

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("desgnNotes");  //Get the Search criteria
  filter = input.value.toUpperCase();  //Initiate filter - need to be able to join search criteria  
  table = document.getElementById("desgnTable");  //Get the product table within the modal
  tr = table.getElementsByTagName("tr");    //loop through the table
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];     // find the correct results
    if (td) {  if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {   tr[i].style.display = "none";   // display correct results
      }  }  } }

Modal and working selector

<p id="designNotes">1,2,3,4</p>
<div id="designNotesModal" class="modal2">
  <div class="modal-content-Notes">
    <div class="modal-body-Notes">
   <table id="desgnTable" cellspacing="0" cellpadding="0">
  <col span="2">
  <tr>
    <td>1,</td>
    <td> Flanged Collector</td>
  </tr>
  <tr>
    <td>2,</td>
    <td> Slip-fit Collector</td>
  </tr>
  <tr>
    <td>3,</td>
    <td> Hook-ups for smog </td>
  </tr>
  <tr>
    <td>4,</td>
    <td> No smog hook-ups</td>
  </tr>
</table>
</div></div></div>