V5 dropdown in table Javascript error

Howdy! I’ve got a dropdown inside of a table that throws an error when clicked (if clicked twice, it displays the dropdown, but not on the first click). Outside of the table, it functions without error. Inside the table, it throws the error.

The Error:

Uncaught TypeError: this._menu is undefined
    show dropdown.js:142
    toggle dropdown.js:138
    _addEventListeners dropdown.js:235
    i event-handler.js:102
    j event-handler.js:208
    on event-handler.js:242
    _addEventListeners dropdown.js:233
    we dropdown.js:107
    dropdownInterface dropdown.js:388
    <anonymous> dropdown.js:519
    n event-handler.js:120
    j event-handler.js:208
    on event-handler.js:242
    <anonymous> dropdown.js:517
    <anonymous> bootstrap.bundle.min.js:6
    <anonymous> bootstrap.bundle.min.js:6

Code producing error:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

<table>
//loop
<tr><td>
  <a class="btn btn-primary actionButton" href="#" data-user='gjg0007' data-bs-toggle="dropdown">fred</a>
</td></tr>
//end loop
</table>

<div id="classMenu" class="dropdown-menu">
  <a tabindex="-1" href="#" class="dropdown-item Class1">Class 1</a>
  <a tabindex="-1" href="#" class="dropdown-item Class2">Class 2</a>
  <a tabindex="-1" href="#" class="dropdown-item Class3">Class 3</a>
</div>

<script>
$classMenu = $("#classMenu");
$(".actionButton").click(function() {
  var username = $(this).data("user");
  //move dropdown menu
  $(this).after($classMenu);
  //update links
  $classMenu.find(".Class1").attr("href", "site.php?username="+username+"&item=Class1");
  $classMenu.find(".Class2").attr("href", "site.php?username="+username+"&item=Class2");
  $classMenu.find(".Class3").attr("href", "site.php?username="+username+"&item=Class3");
  //show dropdown
  $(this).dropdown();
});
</script>

Code with no error:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

//loop
<a class="btn btn-primary actionButton" href="#" data-user='gjg0007' data-bs-toggle="dropdown">fred</a>
//end loop

<div id="classMenu" class="dropdown-menu">
  <a tabindex="-1" href="#" class="dropdown-item Class1">Class 1</a>
  <a tabindex="-1" href="#" class="dropdown-item Class2">Class 2</a>
  <a tabindex="-1" href="#" class="dropdown-item Class3">Class 3</a>
</div>

<script>
$classMenu = $("#classMenu");
$(".actionButton").click(function() {
  var username = $(this).data("user");
  //move dropdown menu
  $(this).after($classMenu);
  //update links
  $classMenu.find(".Class1").attr("href", "site.php?username="+username+"&item=Class1");
  $classMenu.find(".Class2").attr("href", "site.php?username="+username+"&item=Class2");
  $classMenu.find(".Class3").attr("href", "site.php?username="+username+"&item=Class3");
  //show dropdown
  $(this).dropdown();
});
</script>

**Updated to reflect looping

[griffgj]

Perfect! Thank you!

[ffoodd]

IMHO this is more related to accessibility than JS, for the disclosure ARIA pattern to work as intended and described.

Targetting an outside element would require an extra association on the trigger button, using aria-controls to specify which élément it acts on. I think we don’t support this for dropdowns, however that’s more or less what’s done in tabs (and maybe collapses too) .