Why is HTML Button not working with jQuery Webpack

I am using webpack for build my HTML and javascript files. I have a function defined in index.js I have tried the solution mentioned here. But none seems to work for calling function onclick button.

Here's my HTML:

<section class="page-section bg-primary" id="airplanes">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8 text-center" id="funding-container">
          <h2 class="text-white mt-0">Send <span class="underlined"><span id="fundingPrice" class="underlined"></span> Ethers to Fund Airline Insurance</h2>
          <hr class="divider my-4">
          <button class="btn btn-light btn-xl" type="button" id="fundAirline">Fund Insurance</button>
          <hr class="divider my-4">
          <h2 class="text-white mt-0">Enter ETH Address to register new Airline</h2>
          <hr class="divider my-4">
          <div class="wrap-input100 bg1">
            <span class="label-input100">Ethereum Address *</span>
            <input class="input100" type="text" name="name" placeholder="0x00000000000000000000000000000000000000">
          </div>
          <button class="btn btn-light btn-xl" type="button" id="registerAirline">Register Airline</button>
        </div>
      </div>
    </div>
  </section>

Here's my index.js imports and function:

import DOM from './dom';
import Contract from './contract';
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import './assets/css/creative.css';
import './assets/select2/select2.css';
import './assets/css/form.css';
import './assets/bootstrap/bootstrap.bundle.min.js';
import './assets/jquery-easing/jquery.easing.min.js';
import './assets/creative.js';

    DOM.elid('#registerAirline').addEventListener('click', async () => {
                const airline = $("#newAirline").val();
                if (airline) {
                    contract.registerAirline(airline, (error, result) => {
                        console.log(error, result);
                    });
                } else {
                    alert("You need to insert an airline address");
                }

            })

            $('#fundAirline').addEventListener('click', async () => {
                contract.fundAirline((error, result) => {
                    console.log(error, result);
                }) 
            })