Не работает таблица на js

У меня есть таблица на HTML и такая же таблица на JS.В них находится скрипт меню дерева. Проблема заключается в том, что скрипт меню дерева работает с HTML, а с написанной таблицей на js не работает.

Из за чего это может быть, и как решить эту проблему?

<aside>
    <table id="table1">
        <tr>
            <th>Имя</th>
            <th>Состояние</th>
            <th>Дата</th>
        </tr>
        <tr>
            <td>
              <ul id="myUL">
                <li><span class="caret">НАПИТКИ</span>
                  <ul class="nested">
                    <li>ВОДА</li>
                    <li>ЛИМОНАД</li>
                    <li><span class="caret">ЧАЙ</span>
                      <ul class="nested">
                        <li>Черный чай</li>
                        <li>Белый чай</li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </td>
        </tr>
    </table>
</aside>
<script src="file.js"></script>

aside 
{
    width: 10%;
    padding-left: 15px;
    margin-left: 15px;
    float: left;    
    background-color: lightgray;
    height: 1000px;
}
td 
{
    vertical-align: top;
}
ul,#myUL 
{
    list-style-type: none;
}
#myUL 
{
    margin: 0;
    padding: 0;
}
.caret 
{
    cursor: pointer;
    user-select: none;
}
.caret::before 
{
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
}

.nested 
{
    display: none;
}
.active 
{
    display: block;
}

Таблица на js

function func()
{
    var table = document.getElementById("table1");
    table.innerHTML = " "
    var tr = document.createElement('tr');
    var th = document.createElement('th');
    th.innerHTML= "Напитки"
    tr.appendChild(th);
    table.appendChild(tr);

    var tr = document.createElement('tr');
        var td =  document.createElement('td');
            var ul =  document.createElement('ul');
                ul.setAttribute('id','myUL');
                var li =  document.createElement('li');
                    var span =  document.createElement('span');
                    span.className = "caret";
                    span.innerHTML=" Напитки";
                li.appendChild(span);
                
                    var ul1 =  document.createElement('ul');
                    ul1.className = "nested";

                        var li1 =  document.createElement('li');
                        li1.innerHTML= "Вода";
                        ul1.appendChild(li1);

                        var li1 =  document.createElement('li');
                        li1.innerHTML= "Лимонад";
                        ul1.appendChild(li1);

                        var li1 =  document.createElement('li');

                            var span1 =  document.createElement('span');
                            span1.className = "caret";
                            span1.innerHTML=" Напитки";
                            li1.appendChild(span1);
                            var ul2 =  document.createElement('ul');
                            ul2.className = "nested";

                                var li2 =  document.createElement('li');
                                li2.innerHTML= "Чай каркаде";
                                ul2.appendChild(li2);

                                var li2 =  document.createElement('li');
                                li2.innerHTML= "Чай белый";
                                ul2.appendChild(li2);

                            li1.appendChild(ul2);

                        ul1.appendChild(li1);

                    li.appendChild(ul1)
                ul.appendChild(li);
            td.appendChild(ul)
        tr.appendChild(td);
    table.appendChild(tr)
    
}

Скрип работы меню дерева

function open_close()
{
    const ot = document.querySelector('table')
    ot.addEventListener('click', e => {
  const o = e.target
  if (!o.classList.contains('caret')) return
  const ob = o.closest('li').querySelector('.nested')
  ob.classList.toggle("active")
  ob.classList.toggle("caret-down")
  const a = [...o.closest('td').querySelectorAll('.nested')].map(o => o.className)
  ot.querySelectorAll('td').forEach(o => {
    o.querySelectorAll('.nested').forEach((o, i) => {
      o.className = a[i]
    })
  })
})
}