After I added the div tab, the AJAX sub-menu is not working anymore. I am stuck here for whole day.

2. <div class="tab">
3. <button class="tablinks" onclick="openProgram(event, 'add_item')" id="defaultOpen">Add Item</button>
4. <button class="tablinks" onclick="openProgram(event, 'list_item')">List Items</button>
5. </div>
6. 
   
7. <!-------------------------------------------------------------------------------------------------------------------------------->
8. <div id="add_item" class="tabcontent">
9. 
   
10. 
    
11. <div id="list_item" class="tabcontent">
12. ...
13. //not working here
14. echo '<select name="listcategory" onchange="showsubcat(this.value)">';
15. foreach ($categoryRows as $categoryRow){
16. echo '<option value="' . $categoryRow['id'] . '">' . $categoryRow['category_name'] . '</option>';
17. }
18. echo '</select>';
19. echo '<div id="subcatchooser"><b>No Subcategory</b></div>';
20. //not working here

1. <script>
2. 
   
3. function showsubcat(str) {
4.     if (str.length == 0) { 
5.         document.getElementById("subcatchooser").innerHTML = "";
6.         return;
7.     } else {
8.         var xmlhttp = new XMLHttpRequest();
9.         xmlhttp.onreadystatechange = function() {
10.             if (this.readyState == 4 && this.status == 200) {
11.                 document.getElementById("subcatchooser").innerHTML = this.responseText;
12.             }
13.         };
14.         xmlhttp.open("GET", "ajax.php?action=showsubcat&parent_id=" + str, true);
15.         xmlhttp.send();
16.     }
17. }
18. 
    
19. </script>

thx