Как отобразить определенную строку таблицы в javascript

Я хочу отобразить строку таблицы на основе выбора флажка, где мне нужно отобразить только конкретную строку. Я ноб в JavaScript и взял этот сниппет из stackoverflow.

Я пытался изменить код в соответствии с требованиями, но не смог разобраться. вот мои данные, которые я получаю из API

В JS скрипте он сопоставляет значение td, но я не упоминаю значение таблицы явно, все это приходит из конечной точки API.Я пытаюсь разобраться с этим уже 2 дня, ваша помощь будет очень признательна. https://jsfiddle.net/shalman44/syu54og2/[![[][1]][1]

   <div>Country</div>
        <div class="row" name="country_checkbox" id="id_row"  onclick="return filter_type(this);">
         <ul id="id_country">
        <li><label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0">
     NORTHAMERICA</label>
    
    </li>
        <li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3">
     LATAM</label>
    </li>

    <li><label for="id_country_2"><input type="checkbox" name="country" value="ASIA" 
    placeholder="Select Country" id="id_country_2">ASIA</label>
    </li>
    
     </ul>
                </div>
        <table class="datatable" id='table_id'> 
          <thead>
            <thead>
              <tr>
                <th>Region</th>
                <th> Area </th>
                <th> Country </th>
             </tr>
            </thead>
 
          <tbody>
            <tr id="trow">
             {% for i in database%}
              <td>i.Region</td>
              <td>i.Area </td>
              <td>i.Country</td>
             </tr>
          </tbody>



<script>
// checkbox selection

     function filter_type(box) {
    //alert("checked");
     var cbs = document.getElementsByTagName('input');
     var all_checked_types = [];
     for(var i=0; i < cbs.length; i++) {
         if(cbs[i].type == "checkbox") {
                 if(cbs[i].name.match(/^country/)) {
                         if(cbs[i].checked) {
                             all_checked_types.push(cbs[i].value);
                          }
                      }
               }
      }

     if (all_checked_types.length > 0) {
         $('.dataclass tr:not(:has(th))').each(function (i, row) {
             var $tds = $(this).find('td'),
             type = $tds.eq(2).text();
             if (type && all_checked_types.indexOf(type) >= 0) {
                 $(this).show();
              }else{
                 $(this).hide();
              }
          });
      }else {
            $('.datatbl tr:not(:has(th))').each(function (i, row) {
                var $tds = $(this).find('td'),
                type = $tds.eq(2).text();
                $(this).show();
             });
    }
    return true;
 }  

</script>

const rows = document.querySelector("#table_id tbody").querySelectorAll("tr");
const checks = document.getElementById("id_country")
  .querySelectorAll("[name=country]");
document.getElementById("id_country").addEventListener("change", function(e) {
  const tgt = e.target;
  if (tgt.name === "country") {
    const countries = [...checks]
      .filter(chk => chk.checked)
      .map(({value}) => value)
    /* hide if there are selected countries and if the row country is not found
       in the list of checked countries */
    rows.forEach(row => row.classList.toggle("hide", 
      countries.length > 0 && !countries.includes(
        row.querySelector("td:nth-child(3)").textContent.trim().toUpperCase())
      )
    )
  }
})

.hide {
  display: none;
}

<div>Country</div>
<div class="row" name="country_checkbox" id="id_row">
  <ul id="id_country">
    <li><label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0">NORTHAMERICA</label>
    </li>
    <li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3">LATAM</label>
    </li>

    <li><label for="id_country_2"><input type="checkbox" name="country" value="ASIA" 
            placeholder="Select Country" id="id_country_2">ASIA</label>
    </li>

  </ul>
</div>
<table class="datatable" id='table_id'>
  <thead>
    <thead>
      <tr>
        <th>Region</th>
        <th> Area </th>
        <th> Country </th>
      </tr>
    </thead>
    <tbody>
      <tr id="trow">
        <td>Region</td>
        <td>Area </td>
        <td>NORTHAMERICA</td>
      </tr>
      <tr id="trow">
        <td>Region</td>
        <td>Area </td>
        <td>ASIA</td>
      </tr>
      <tr id="trow">
        <td>Region</td>
        <td>Area </td>
        <td>LATAM</td>
      </tr>
    </tbody>
</table>