document.querySelectorAll('button').forEach(function(button) {
  button.addEventListener('mouseenter', function() {
    function random(max) {
      return Math.random() * (max - 0) + 0;
    }

    var c = document.createDocumentFragment();
    for (var i = 0; i < 100; i++) {
      var styles = 'position: absolute;' +
                   'left: ' + (random(100)) + '30%;' +  // Limit the position to within the button
                   'top: ' + (random(60)) + '30%;' +   // Limit the position to within the button
                   'width: 3px; height: 6px; ' +        // Increase size
                   'transform: translate(-50%, -50%) rotate(' + random(360) + 'deg);' +
                   'background: hsla(' + random(360) + ', 100%, 50%, 1);' +
                   'animation: bang 2000ms ease-out forwards;' +
                   'opacity: 0;' +
                   'z-index: 10;';  // Set a high z-index

      var e = document.createElement("i");
      e.style.cssText = styles;
      c.appendChild(e);
    }
    button.appendChild(c);
    setTimeout(() => {
        // Create an array of the <i> elements to remove
        let childrenToRemove = Array.from(button.querySelectorAll('i'));
        // Remove each <i> element
        childrenToRemove.forEach(child => button.removeChild(child));
    }, 3000);
  });
});