Filter multiple tables using query string with javascript

first I’m sorry if at some point I express myself badly, English is not my native language. I am developing an application in which the user sends 2 values through a form and in another page I use one of those data (string with comma separated options) to show a specific table and hide the others, and with the second data (Integer) I show one of the rows of that table.

What I already have:
I have the form and send the data through the Query String, I capture that data, I assign a variable to the integer and to the text string I separate it by commas and create an array.

URL Example: app.tables.example/?id=123&ops=option1%2c+option2

//Read parameters sent by form
const param = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop)
});

//Assign integer to a variable
let num = param.id;

//Assign options to a variable
let op = param.ops;

//Separate string with commas
let opsplit = op.split(',');

Up to here everything is perfect, I can print all the variables without any problem, now I need to compare the array with the id of each table, show the one that corresponds and hide the others. (The id of the tables is the same that user passes with the text string).

The tables look something like this:

<div id="option1" class="table-1">
<table width="100%">
<thead>
<tr>
<th align="left">Option1</th>
<th align="left">Integer</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Number</td>
<td align="left">Info</td>
</tr>
<tr>
<td align="left">1</td>
<td align="left">textblock</td>
</tr>
<tr>
<td align="left">2</td>
<td align="left">textblock</td>
</tr>
</tbody>
</table>
</div>

//As you can see the id of each table corresponds to what the user chose
<div id="option2" class="table-1">
<table width="100%">
<thead>
<tr>
<th align="left">Option2</th>
<th align="left">Integer</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Number</td>
<td align="left">Info</td>
</tr>
<tr>
<td align="left">1</td>
<td align="left">textblock</td>
</tr>
<tr>
<td align="left">2</td>
<td align="left">textblock</td>
</tr>
</tbody>
</table>
</div>

The problem:
I’m supposed to use the array elements in a “for” loop and compare them with the id of each table, then show that table and hide others, but I don’t know exactly how to do it.

function myFunction() {
  var input, filter, table, tr, td, i, y, txtValue;
for (r = 0; r<opsplit.lenght; r++){
  input = opsplit[r];
  filter = function(x){
    return x.toUpperCase();
  };  
  opsplit = opsplit.map(filter);
  }

//When I test this, it does not return any value, no matter if I add "innerHTML" or not
  for(y = 0; y<opsplit.lenght; y++){
    table = document.getElementById('opsplit[y]').innerHTML;
 
//I use this section to test, basically it should show me the row, but since the previous loop failed, it does nothing. What I really need is to show the whole table where this data is located and hide the other tables. 
  tr = table.getElementsByTagName("tr");
  
    for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
}
myFunction();

I am really stuck at the moment and would appreciate any help. What is the correct way to use the string array, and how can I hide the tables that the user does not need?