Dynamic JSON Table Sorting With Select Box - Sorting By JSON ID but it's just loading everything, everytime

Question

I've got a select box listing the provinces and have assigned them each an ID correlating to the JSON file, and on click, I want to bring up the data with each province, but it's bringing up everything. Here is what I have.

This is my JSON:

{
    "data": [{
        "province": "ON",
        "date": "2022-04-12",
        "change_cases": 2300,
        "change_fatalities": 4,
        "change_tests": 14183
    }, {
        "province": "QC",
        "date": "2022-04-12",
        "change_cases": 2596,
        "change_fatalities": 35,
        "change_tests": 0
    }]
}

This is my select box

<select id="myselect" onchange="change_myselect(this.value)">
    <option>Select a Province</option>
<option value="0">Ontario</option>
<option value="1">Quebec</option>
<option value="2">Nova Scotia</option>
<option value="3">New Brunswick</option>
<option value="4">Manitoba</option>
<option value="5">British Columbia</option>
<option value="6">Prince Edward Island</option>
<option value="7">Saskatchewan</option>
<option value="8">Alberta</option>
<option value="9">Newfoundland</option>
<option value="10">Northwest Territories</option>
<option value="11">Yukon</option>
<option value="12">Nunavut</option>
</select>

and my Javascript

<script>
function change_myselect(sel) {
  var obj, dbParam, xmlhttp, myObj, x, txt = "";
  obj = { table: sel, limit: 20 };
  dbParam = JSON.stringify(obj);
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myObj = JSON.parse(this.responseText);
      txt += "<table border='1'>"
     for (x in myObj.data) {
    txt += "<tr><td>" + myObj.data[x].province + "</td></tr>";
  }
      txt += "</table>"    
      document.getElementById("demo").innerHTML = txt;
      }
    };
  xmlhttp.open("POST", "provdata.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("x=" + dbParam);
}
</script>

I'm loading from an external API, so I can't exactly change it too much. When I click on any province, it just loops through a list of each province, rather than the individual province and it's information. (So, ON, QC, etc.. rather than just ON)

I followed exact code from another solution and it did not work. I've fiddled a few days, and had no luck. It just loads everything, rather than one thing. Thanks!