I have the following code which represents an HTML Table and after button onClick I create one more same HTML Table.

The problem is that the second table is not listening on the Function applied to the first table as well that highlights the cells.

I am trying to figure out if there is something that preventing the second table to listen to the script code as well.

Any ideas would be much appreciated.

The style CSS is :

         table,tr,th{
         border:2px solid black;
         }
         table{
         width:200px;
           height:200px;
         }
         th.highlight {
         background-color: black;
          } 

The HTML Table looks like this :

         <table id="test">
         <tr><th>test</th><th>test</th><th>test</th></tr>
         <tr><th>test</th><th>test</th><th>test</th></tr>
         <tr><th>test</th><th>test</th><th>test</th></tr>

         </table>
         <div id="test2">

         </div>
         <button type="button">Add</button>
        

And the Script that applies to the first table but it is not working on the second :

    const addColumn = () => {
    var x = document.getElementById("test2");
    x.innerHTML = "<table> <tr><th>test2</th><th>test2</th><th>test2</th></tr> <tr> 
    <th>test2</th><th>test2</th><th>test2</th></tr> <tr><th>test2</th><th>test2</th> 
    <th>test2</th></tr></table>";
    }

    document.querySelector('button').onclick = addColumn
    $('th').hover(function() {
     $(this).addClass('highlight');
     
 }, function() {
     $(this).removeClass('highlight');
 
 });