How to display dropdown menu in javascript

I’m using a javascript to display a table in a django template. If the receipt’s is_disbursed value is True and the paid_status is Settled, I want the dropdown menu to contain Print only. If is_disbursed is False and the paid_status is Settled, it should display the Print, Disburse and the Reverse options. If is_disbursed is True and paid_status is Partially Paid, I want to display the Print, Collect Balance, and the Reverse options. If is_disbursed is False and the paid_status is Unpaid, the dropdown should contain Print, Collect Balance, and Reverse

#html

<div class="card-body">
   <div id="table-receipts" data-rent-receipt-url="{% url 'agency_rent_receipt' pk='PLACEHOLDER' %}" data-disburse-rent-url="{% url 'disburse_rent' pk='PLACEHOLDER' %}" data-rent-bal-url="{% url 'rent_balance' receipt_id='PLACEHOLDER' %}"></div>
</div


//js
<script>
document.addEventListener("DOMContentLoaded", function () {
const table = document.getElementById("table-receipts");

if (table) {
    const printReceiptUrl = table.getAttribute("data-rent-receipt-url");
    const rentDisbursementUrl = table.getAttribute("data-disburse-rent-url");
    const rentBalanceUrl = table.getAttribute("data-rent-bal-url");

    fetch('/accounting/receipts_data/api')
    .then(response => response.json())
    .then(receipt_data => {
        new gridjs.Grid({
            columns: [
                { name: "Receipt Number", width: "180px" },
                { name: "Date", width: "120px" },
                { name: "Address", width: "120px" },
                { name: "Tenant", width: "120px" },
                { name: "Status", width: "120px" },
                {
                    name: "Action", width: "100px", formatter: function (cell, row) {
                        const receiptId = row.cells[5].data;
                        const finalprintReceiptUrl = printReceiptUrl.replace('PLACEHOLDER', receiptId);
                        const finalrentDisbursementUrl = rentDisbursementUrl.replace('PLACEHOLDER', receiptId);
                        const finalrentBalanceUrl = rentBalanceUrl.replace('PLACEHOLDER', receiptId);

                        const isDisbursed = row.cells[7].data;
                        const paidStatus = row.cells[4].data;

            let dropdownContent = '';

            if (!isDisbursed) {
              dropdownContent += `<li><a class="dropdown-item" href="${finalprintReceiptUrl}">Print</a></li>`;
            }

            if (!isDisbursed && (paidStatus === 'Partially Paid' || paidStatus === 'Unpaid')) {
              dropdownContent += `<li><a class="dropdown-item" href="${finalrentBalanceUrl}">Collect Balance</a></li>`;
            }

            dropdownContent += `
              <li><a class="dropdown-item" href="${finalrentDisbursementUrl}">Disburse</a></li>
              <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#reversemodal-{{receipt.id}}">Reverse</a></li>
            `;

            return gridjs.html(`
              <div class="btn-group" role="group">
                <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  Quick Actions
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                  ${dropdownContent}
                </ul>
              </div>
            `);
          }
        }
      ],
            pagination: { limit: 5 },
            search: true,
            data: receipt_data.receipt_data
        }).render(table);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });
}

});

#receipts_data

{
"receipt_data": [
[
  "SO0569",
  "2024-04-02",
  "123 Moreleta",
  "Nyasha",
  "Settled",
  "2f7****-***-******-********6", //uuid
  "SO0569",
  false],