How to make floating text onclick like cookie clicker?

When clicking the “big cookie” in cookie clicker, there is a popup showing how many cookies you earned (+276.341 septillion in this image), which slowly moves upward and fades out.

I wanted to implement a similar feature in my game, I sucessfully made the moving up and fading out part with css animations, however, there will be more than one of these numbers showing up at once, so how do I clone elements? And how do I make these show up at the cursor position?

Answer

I don’t know what technologies you are using so here is how to do it with vanilla HTML and JS. You say you already made the HTML & CSS, so turn your HTML into a template

<template id="floating-text-template">
  <!-- your existing code -->
</template>

Now in your javascript, clone the template on each click

function click(event) {
  const template = document.getElementByID('#floating-text-template').content.cloneNode(true);
  const element = template.querySelector('.floating-text') //replace class with yours
  element.style.left = `${event.clientX}px`
  element.style.top = `${event.clientY}px`
  document.appendChild(element);
}