Show modal upon form submission

I have a Javascript function that does many things. Depending on the results of the function I would like to display a modal which will give the user a choice whether to proceed or cancel the process.

I cannot get Javascript function to display the modal, see below the HTML and Javascript function.

<!-- Modal  -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Overwrite Warning</h5>
          <button type="button" class="btn-close" data-mdb-ripple-init data-mdb-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">Data for this project id is already in the database, would you like to overwrite existing data?</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-mdb-ripple-init data-mdb-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" data-mdb-ripple-init>Overwrite</button>
        </div>
      </div>
    </div>
</div>

below the javasript function that tries to use modal('show'), however i get the error ".modal is not a function"

// Data Upload checking to see if there is already data in the database
$(document).ready(function() {
  $("#data-upload-form").on("submit", function(event) {

    console.log("modal function starting");
    $("#exampleModal).modal("show");
    event.preventDefault();

  });
});

below are also the css and javascript libraries i have imported in my base html template

css:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/mdb.min.css">
    <link rel="stylesheet" type="text/css" href="../static/plugins/css/all.min.css">         
    <link rel="stylesheet" type="text/css" href="../static/css/styles.css">

javascript:

        <script type="text/javascript" charset="utf-8" src="../static/js/jquery-3.6.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../static/js/mdb.umd.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../static/plugins/js/all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../static/js/scripts.js"></script>