I have a button which depending on whether the text input it triggers is opened or not, switches between 'Report A Problem' to 'Close'. In an effort to consolidate my code I've decided to use Handlebars.JS to create the following:

  <button id="myBtnToReportABug" onclick="toggleReportForm(); clearFields();" type="button" class="btn btn-secondary float-right" >{{#if report_form_opened}} Report A Problem {{else}} Close {{/if}}</button>

I've followed examples in the documentation, and as you can see in the Javascript I will attach below, I have a functioning toggle on togggleReportForm, which console logs true & false upon each click. I'm not sure what I'm missing here and would appreciate any tips.

Currently the button only displays 'Close' with no error messages.

var report_form_opened = report_form_opened;
 $(document).ready(function() {
  const client = ZAFClient.init();
  
         $("#myBtnToReportABug").click(() => collapse.collapse('toggle'));


          $("#bugForm").submit((e) => {
            e.preventDefault()
            const input = document.getElementById('nameInput');
            bugInfo = {
              "name": "Report From " + idTicket,
              "story_type" : "Bug",
              "description": input.value + " " + `${data.ticket.brand.url}/agent/tickets/${idTicket}`,
            }
            reportBug(bugInfo).then(collapse.collapse('toggle'))
          })
        });
      });
    });



    async function reportBug(data = {}) {
      const url = 'https://www.pivotaltracker.com/services/v5/projects/2530461/stories'
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          "X-TrackerToken": `${metadata.settings.token}`,
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      });
      return response.json();
    }


// changes text on 'report problem' button when form open
function toggleReportForm() {
  report_form_opened = !report_form_opened;
  console.log(toggleReportForm)
}

// clears text field onclick
function clearFields() {
  document.getElementById("nameInput").value = "";
}