JSFiddle - React, Tailwind, and code Playground

HTML

<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/9.2.0/mdb.min.css"
  rel="stylesheet"
/>

<!-- Nested accordion example -->
<div class="accordion" id="level_1">
  <div class="accordion-item">
    <h2 class="accordion-header" id="level_1_menu_1">
      <button
        data-mdb-collapse-init
        class="accordion-button collapsed"
        type="button"
        data-mdb-target="#level_1_collapse_1"
      >
        Menu #1
      </button>
    </h2>
    <div id="level_1_collapse_1" class="accordion-collapse collapse">
      <div class="accordion-body">

        <!-- Nest another accordion -->
        <div class="accordion" id="level_2">
          <div class="accordion-item">
            <h2 class="accordion-header" id="level_2_menu_1">
              <button
                data-mdb-collapse-init
                class="accordion-button collapsed"
                type="button"
                data-mdb-target="#level_2_collapse_1"
              >
                Submenu #1.1
              </button>
            </h2>
            <div id="level_2_collapse_1" class="accordion-collapse collapse">
              <div class="accordion-body">Content 1.1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/9.1.0/mdb.umd.min.js"></script>

JavaScript

$(function() {

  // Event issue
  $('.accordion-collapse').on('show.mdb.collapse', (e) => {
    console.log('show: ', $(e.currentTarget).attr('id'));
  });

  $('.accordion-collapse').on('hide.mdb.collapse', (e) => {
    console.log('hide: ', $(e.currentTarget).attr('id'));
  });

  $('.accordion-button').on('click', (e) => {
    console.log('click on: ', $(e.currentTarget).data('mdb-target'));
  });

});