dynamically insert values in popover table

i have created a table in popover (bootstrap5). which display after user click on map feature. i am trying to insert value in popover table but iam getting error Cannot read properties of undefined (reading ‘nodeType’)

`

<thead>

   <tr>
    
    <th>Information</th>
  </tr>
</thead>
<tbody>
<tr>
    <td>Name</td>
    <td><label id="c_nme"></td>
  </tr>
  
    <td>Area</td>
    <td><label   id="ar"></td>
  </tr>
  <tr>
    <td>Year</td>
    <td><label   id="yr"></td>
  </tr>
   
    <td><button class="btn" id = "closetable"><i class="fa fa-close" ></i> Close</button></td>
    
  </tr>
  
</tbody>

`

var popup = new ol.Overlay({
  element: document.getElementById('popup'),
});
map.addOverlay(popup);
    
<!------------------------------------------------------------------------------->
element = popup.getElement();
map.on('click', function (evt) {

 var pixel = map.getEventPixel(evt.originalEvent);
  map.forEachFeatureAtPixel(pixel, function(feature) {
   var coodinate = feature.getGeometry().getCoordinates();
 
  popup.setPosition(coodinate);
  var name = feature.get('Name');
   var time = feature.get('area');
  let popover = bootstrap.Popover.getInstance(element);
  if (popover) {
    popover.dispose();
  }
  popover = new bootstrap.Popover(element, {
    animation: false,
    container: element,
    content: function () {
           return $('.s_nme').html(feature.get('Name'));
        },
    html: true,
    placement: 'top',
    title: ' Details',
  });
  popover.show();
});
});

i have added my code it works perfect when i am using this

popover = new bootstrap.Popover(element, {
    animation: false,
    container: element,
    content: '<p>The location you clicked was:</p><code>' + name + '</code>',
    html: true,
    placement: 'top',
    title: ' Details',
  });
  popover.show();

but when i am trying to add table it doesnot work