how can I execute the call to function doing ajax request using jQuery $("#").click()

Question

I have a function that gets the form values and send them Flask backend to retrieve info from SQLite database. I'm using jQuery $.ajax() with POST to allow for better error handling.

Because the ajax is async I'm passing a callback to logTable(callback) as suggested here. I need the logTable() to run after I input the form data and click the submit button. I'm using $("#some-id").click() to achieve this.

      const logsTable = (callback) => {
        const startDate = $("#start-date").val();
        const endDate = $("#end-date").val();
        const container = $("#programs").val();

        const server = window.location.host;
        const url = `http://${server}/api/log-info`;
        let logs = "";

        let dataToSend = {
          start_date: startDate,
          end_date: endDate,
          program: container,
        };

        $.ajax({
          type: "POST",
          url: url,
          data: dataToSend,
          success: (data) => {
            callback(data);
          },
          error: (jqXHR, textStatus, errorThrown) => {
            alert(errorThrown);
          },
        });
      };

      $("#submit-button").click(() => {
        return logsTable((data) => {
          $("#logs-div").html(data);
          alert("Success");
        });
      });

I receive the alert with Success, the data briefly appears on the page and disappears. If run the code below directly it, it runs on page reload and posts an empty list to a page because no data was sent to the backend.

logsTable((data) => {
  $("#logs-div").html(data);
  alert("Success");
});

I need to somehow the function call above to a Submit button. How can I do that?