JS function confetti explosion does not work and display error

Question

Could someone help please.

I am trying since two days to replicate this functionality in my page.

https://codepen.io/Coding-in-Public/pen/abqpvOJ

I need to trigger a confetti explosion when I click in a button, but the explosion effect will be triggered every time that a Label Class receives a new status.

Example:

This is my html structure

first Label Class status

<label class="inner all available" id="label-confetti">
    <span class="p5_effect_tooltip_b top">
        <span class="number">1  2  5</span>
    </span>
</label>

After a click, the Label Class receives the second status

<label class="inner all available checked" id="label-confetti">
    <span class="p5_effect_tooltip_b top">
        <span class="number">1  2  5</span>
    </span>
</label>

When I click the button and the Label Class receives the second status, this is the moment to make the explosion happens.

Ex: label class="inner all available checked"

I have already tried to use the ID as trigger element, but it did not work.

I get the following message in the console.

Uncaught TypeError: Cannot read property 'addEventListener' of null

I have my jquery-3.5.1.min.js library in the footer on the line 337

And I have the function file confetti-func-js.js on the line 481

This is the JS Script that I use and almost all my error attempt to make this magic to happen, but none of them did work until now.:

//import JSConfetti from '/../../../../../js-confetti' Do not work

const jsConfetti = new JSConfetti();

function confettiFY(){
  //jsConfetti.addConfetti();
  jsConfetti.addConfetti({
    confettiColors: [
      '#ff0a54',
      '#ff477e',
      '#ff7096',
      '#ff85a1',
      '#fbb1bd',
      '#f9bec7',
    ],
    confettiRadius: 6,
    confettiNumber: 500,
  });
}

// document.querySelector('.p5_btn_amount').addEventListener('click',confettiFY) Do not work
// document.querySelector('p5_btn_amount').addEventListener('click',confettiFY) Do not work
// document.querySelector('.confetti-id').addEventListener('click',confettiFY) Do not work
// document.querySelector('.checked').addEventListener('click',confettiFY) Do not work
// document.querySelector('.number').addEventListener('click',confettiFY) Do not work
// document.querySelector('.inner all available checked').addEventListener('click',confettiFY)  Do not work
// document.querySelector('.label-confetti').addEventListener('click',confettiFY)  Do not work
// document.querySelector('.label#label-confetti.inner.all.available.checked').addEventListener('click',confettiFY) Do not work
// document.querySelector('.#label-confetti.inner.all.available.checked').addEventListener('click',confettiFY) Do not work
// document.querySelector('.label-confetti.inner.all.available.checked').addEventListener('click',confettiFY) Do not work
// document.querySelector('.inner.all.available.checked').addEventListener('click',confettiFY) Do not work

I use the complete Library JS (library) for this function all together in a single file. If I try to call/import the Instance like the line below, I receive an error message in the console.

import JSConfetti from 'js-confetti'

I downloaded the hole content and put everything, library and function in a single file.

https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js

Any help or a light from what should I have to make?

Thank you so much in advance