title: document.querySelector to select different buttons
body: <p>Hello guys I'm not really a coder but I'm trying to use disintegrate.js and I have it working on one of the buttons on my site but I would like to have this effect work on many different classes/buttons.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var btn = document.querySelector(".boxer");
  var ctx;
  var colorInfoElem = document.querySelector("#colorInfo");
  html2canvas(btn).then(canvas =&gt; {
      ctx = canvas.getContext("2d");
      createParticleCanvas();
      let reductionFactor = 17;
      btn.addEventListener("click", e =&gt; {
          // Get the color data for our button
          let width = btn.offsetWidth;
          let height = btn.offsetHeight
          let colorData = ctx.getImageData(0, 0, width, height).data;
          // Keep track of how many times we've iterated (in order to reduce
          // the total number of particles create)
          let count = 0;
          // Go through every location of our button and create a particle
          for (let localX = 0; localX &lt; width; localX++) {
              for (let localY = 0; localY &lt; height; localY++) {
                  if (count % reductionFactor === 0) {
                      let index = (localY * width + localX) * 4;
                      let rgbaColorArr = colorData.slice(index, index + 4);
                      let bcr = btn.getBoundingClientRect();
                      let globalX = bcr.left + localX;
                      let globalY = bcr.top + localY;
                      createParticleAtPoint(globalX, globalY, rgbaColorArr);
                  }
                  count++;
              }
          }
      });
  });
  /* An "exploding" particle effect that uses circles */
  var ExplodingParticle = function() {
      // Set how long we want our particle to animate for
      this.animationDuration = 1000; // in ms
      // Set the speed for our particle
      this.speed = {
          x: -5 + Math.random() * 10,
          y: -5 + Math.random() * 10
      };
      // Size our particle
      this.radius = 5 + Math.random() * 5;
      // Set a max time to live for our particle
      this.life = 30 + Math.random() * 10;
      this.remainingLife = this.life;
      // This function will be called by our animation logic later on
      this.draw = ctx =&gt; {
          let p = this;
          if (this.remainingLife &gt; 0 &amp;&amp; this.radius &gt; 0) {
              // Draw a circle at the current location
              ctx.beginPath();
              ctx.arc(p.startX, p.startY, p.radius, 0, Math.PI * 2);
              ctx.fillStyle = "rgba(" + this.rgbArray[0] + ',' + this.rgbArray[1] + ',' + this.rgbArray[2] + ", 1)";
              ctx.fill();
              // Update the particle's location and life
              p.remainingLife--;
              p.radius -= 0.25;
              p.startX += p.speed.x;
              p.startY += p.speed.y;
          }
      }
  }
  var particles = [];
  
  function createParticleAtPoint(x, y, colorData) {
      let particle = new ExplodingParticle();
      particle.rgbArray = colorData;
      particle.startX = x;
      particle.startY = y;
      particle.startTime = Date.now();
      particles.push(particle);
  }
  var particleCanvas, particleCtx;
  
  function createParticleCanvas() {
      // Create our canvas
      particleCanvas = document.createElement("canvas");
      particleCtx = particleCanvas.getContext("2d");
      // Size our canvas
      particleCanvas.width = window.innerWidth;
      particleCanvas.height = window.innerHeight;
      // Position out canvas
      particleCanvas.style.position = "absolute";
      particleCanvas.style.top = "0";
      particleCanvas.style.left = "0";
      // Make sure it's on top of other elements
      particleCanvas.style.zIndex = "1001";
      // Make sure other elements under it are clickable
      particleCanvas.style.pointerEvents = "none";
      // Add our canvas to the page
      document.body.appendChild(particleCanvas);
  }
  
  function update() {
      // Clear out the old particles
      if (typeof particleCtx !== "undefined") {
          particleCtx.clearRect(0, 0, window.innerWidth, window.innerHeight);
      }
      // Draw all of our particles in their new location
      for (let i = 0; i &lt; particles.length; i++) {
          particles[i].draw(particleCtx);
          // Simple way to clean up if the last particle is done animating
          if (i === particles.length - 1) {
              let percent = (Date.now() - particles[i].startTime) / particles[i].animationDuration;
              if (percent &gt; 1) {
                  particles = [];
              }
          }
      }
      // Animate performantly
      window.requestAnimationFrame(update);
  }
  window.requestAnimationFrame(update);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="boxer"&gt;&lt;a href="#" class="attractionslink"&gt;Attractions&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
  &lt;div class="boxer2"&gt;&lt;a href="#" class="attractionslink"&gt;Safety&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Right now when I click boxer 1 it works but when I click boxer 2 it doesn't .  I tried adding <code>boxer2</code> to the first line of <code>var btn</code> so it looks like <code>var btn = document.querySelector (".boxer",".boxer2");</code> but it didn't work.</p>