OnClick EventListener not working in my code

I am trying to execute code when a button is pressed. I currently have the “catch all” alert set up.

My code

$(document).ready(function() {
  //bulk submit handler This section works when this form is shown.  In this instance, I have the form
  //I currently have the form hidden
  $("#bulkSubmit").submit(function(e) {
    e.preventDefault();

    var form = $(this);
    var frmUrl = form.attr('action')

    $.ajax({
      type: "POST",
      url: frmUrl,
      data: form.serialize()
    });
  });
});

addButton = document.getElementById('btnCheckInSubmit');
addButton.addEventListener("click", function() {
  alert("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="addCustomerMain main">
  <h1>Add Customer</h1>
  <hr>
  <form method="post" id="addCustomer">
    <div class="formContent">
      <div class="formElement">
        <label for="custName">Name</label>
        <input class="txtLarge" type="text" name="custName" id="custName">
      </div>
    </div>
    <div class="formContent">
      <div class="formElement">
        <label for="custAddress">Address</label>
        <input class="txtLarge" type="text" name="custAddress" id="custAddress">
      </div>
    </div>
    <div class="formContent">
      <div class="formElement">
        <label for="custCity">City</label>
        <input class="txtSmall" type="text" name="custCity" id="custCity">
      </div>
      <div class="formElement">
        <label for="custState">State</label>
        <input class="txtXSmall" type="text" name="custState" id="custState">
      </div>
      <div class="formElement">
        <label for="custZip">Zip</label>
        <input class="txtXSmall" type="text" name="custZip" id="custZip">
      </div>
    </div>
    <div class="formContent">
      <div class="formElement">
        <label for="custPhone">Phone</label>
        <input type="text" name="custPhone" id="custPhone" class="txtLarge">
      </div>
    </div>
  </form>
  <div class="formContent" id="divCheckInSubmit">
    <div class="formElement">
      <button id="btnCheckInSubmit" class="btnSubmit">Add Customer</button>
    </div>
  </div>
</div>
<!-- the script is included here -->
<!-- <script src="../js/addCustomer.js" defer></script> -->

The code I want to work, works if I comment out the JQuery for the bulksubmit, but if it is still in there, the checkinsubmit button’s eventlister for “click” does not fire.