<div class="container">

                <div class="content">

                        <div class="row balloon-area">
                            <div class="lettersarea">

                                <div class="balloon  delay1" style="top: 40.1%;opacity: 0;" data-style="1" data-position="1">
                                    <button type="button" class="balloon-hit-area">A</button>
                                </div>
                                <div class="balloon delay1" style="top: 85.455%;opacity: 0;" data-style="2" data-position="2">
                                    <button type="button" class="balloon-hit-area">B</button>
                                </div>
                                <div class="balloon delay1" style="top: 60.455%; opacity: 0;" data-style="3" data-position="3">
                                    <button type="button" class="balloon-hit-area">C</button>
                                </div>

                               <div class="balloon  delay2" style="top: 40.1%;opacity: 0;" data-style="1" data-position="1">
                                    <button type="button" class="balloon-hit-area">D</button>
                                </div>
                                <div class="balloon delay2" style="top: 85.455%;opacity: 0;" data-style="2" data-position="2">
                                    <button type="button" class="balloon-hit-area">E</button>
                                </div>
                                <div class="balloon delay2" style="top: 60.455%; opacity: 0;" data-style="3" data-position="3">
                                    <button type="button" class="balloon-hit-area">F</button>
                                </div>

                                <div class="balloon  delay3" style="top: 40.1%;opacity: 0;" data-style="1" data-position="1">
                                    <button type="button" class="balloon-hit-area">G</button>
                                </div>
                                <div class="balloon delay3" style="top: 85.455%;opacity: 0;" data-style="2" data-position="2">
                                    <button type="button" class="balloon-hit-area">H</button>
                                </div>

                                <div class="balloon delay3" style="top: 60.455%; opacity: 0;" data-style="3" data-position="3">
                                    <button type="button" class="balloon-hit-area">I</button>
                                </div>

                                <div class="balloon  delay4" style="top: 40.1%;opacity: 0;" data-style="1" data-position="1">
                                    <button type="button" class="balloon-hit-area">J</button>
                                </div>
                                <div class="balloon delay4" style="top: 85.455%;opacity: 0;" data-style="2" data-position="2">
                                    <button type="button" class="balloon-hit-area">K</button>
                                </div>
                                <div class="balloon delay4" style="top: 60.455%; opacity: 0;" data-style="3" data-position="3">
                                    <button type="button" class="balloon-hit-area">L</button>
                                </div>

                                <div class="balloon  delay5" style="top: 40.1%;opacity: 0;" data-style="1" data-position="1">
                                    <button type="button" class="balloon-hit-area">M</button>
                                </div>
                                <div class="balloon delay5" style="top: 85.455%;opacity: 0;" data-style="2" data-position="2">
                                    <button type="button" class="balloon-hit-area">N</button>
                                </div>
                                <div class="balloon delay5" style="top: 60.455%; opacity: 0;" data-style="3" data-position="3">
                                    <button type="button" class="balloon-hit-area">O</button>
                                </div>

                                <div class="balloon  delay6" style="top: 40.1%;opacity: 0;" data-style="1" data-position="1">
                                    <button type="button" class="balloon-hit-area">P</button>
                                </div>
                                <div class="balloon delay6" style="top: 85.455%;opacity: 0;" data-style="2" data-position="2">
                                    <button type="button" class="balloon-hit-area">Q</button>
                                </div>
                                <div class="balloon delay6" style="top: 60.455%; opacity: 0;" data-style="3" data-position="3">
                                    <button type="button" class="balloon-hit-area">R</button>
                                </div>

                                <div class="balloon  delay7" style="top: 40.1%;opacity: 0;" data-style="1" data-position="1">
                                    <button type="button" class="balloon-hit-area">S</button>
                                </div>
                                <div class="balloon delay7" style="top: 85.455%;opacity: 0;" data-style="2" data-position="2">
                                    <button type="button" class="balloon-hit-area">T</button>
                                </div>
                                <div class="balloon delay7" style="top: 60.455%; opacity: 0;" data-style="3" data-position="3">
                                    <button type="button" class="balloon-hit-area">U</button>
                                </div>

                                <div class="balloon  delay8" style="top: 40.1%;opacity: 0;" data-style="1" data-position="1">
                                    <button type="button" class="balloon-hit-area">V</button>
                                </div>
                                <div class="balloon delay8" style="top: 85.455%;opacity: 0;" data-style="2" data-position="2">
                                    <button type="button" class="balloon-hit-area">W</button>
                                </div>
                                <div class="balloon delay8" style="top: 60.455%; opacity: 0;" data-style="2" data-position="3">
                                    <button type="button" class="balloon-hit-area">X</button>
                                </div>

                            </div>

                        </div>

                        <div class="row">
                            <div class="questionword text-center text-success">
                                <div class="useranswer_container">
                                    <div class="user-answer"> </div>
                                    <div class="user-answer"> </div>
                                    <div class="user-answer"> </div>
                                    <div class="user-answer"> </div>
                                </div>

                            </div>
                        </div>


                </div>
            </div>
.balloon {
        width: 20%;
        height: 35%;
        position: absolute;
    }
    .balloon-area {
        border: solid 1px blue;
        height: 600px;
        width: 600px;
        margin: 50px auto 0;
        overflow: hidden;
        position: relative;
    }
    .balloon-hit-area {
        width: 100%;
        height: 55%;
        background: transparent;
        font-size: 40px;
        color: #fff;
    }
    .balloon {
        width: 20%;
        height: 35%;
        position: absolute;
    }
    .balloon {
        border: 5px solid transparent; /* hide animation bug with border on button*/
        animation: float 12s infinite;
        opacity: 0;
        backface-visibility: hidden;
    }
    .balloon.burstboom{
        opacity: 0;
        animation: fade 2s linear;
    }
    .balloon button {
        position: relative;
    }
   .balloon-area [type="button"]:not(:disabled), .balloon-area [type="reset"]:not(:disabled), .balloon-area [type="submit"]:not(:disabled), .balloon-area button:not(:disabled) {
       cursor:url("{{ asset('/img/target.png') }}") 25 25, crosshair;
    }
    .lettersarea, .lettersarea *, button[disabled] {
     /*   cursor: url('../images/balloon_burst/icon-shoot-target.png') 25 25, crosshair;*/
        cursor:url("{{ asset('/img/target.png') }}") 25 25, crosshair;
    }
    .boom.balloon::before{
        background-image: none !important;

    }
    .boom.balloon{
        opacity: 0;
    }
    .balloon[data-style="1"]::before {
        background-image: url("https://i.ibb.co/PM2kdLK/red.png");
    }
    .balloon[data-style="2"]::before {
        background-image: url("https://i.ibb.co/PY5qzDJ/purple.png");
    }
    .balloon[data-style="3"]::before {
        background-image: url("https://i.ibb.co/PWshDxC/orange.png");
    }
    .balloon[data-style="4"]::before {
        background-image: url("https://ibb.co/Jrnh3Tn");
    }
    .balloon[data-style="5"]::before {
         background-image: url("https://i.ibb.co/nzNd5tV/blue.png");
    }
    .balloon[data-style="6"]::before {
        background-image: url("https://i.ibb.co/PM2kdLK/red.png");
    }

    [data-style] button {
        border: 0;
    }
    .balloon::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 130%;
        background-size: 90%;
        background-position-x: 50%;
        background-repeat: no-repeat;
    }
    [data-position="1"] {
        left: 5%;
    }
    [data-position="2"] {
        left: 70%;
    }
    [data-position="3"] {
        left: 35%;
    }
    [data-position="4"] {
        left: 42.5%;
    }
    [data-position="5"] {
        left: 75%;
    }

    .delay1 {
        -webkit-animation-delay: 250ms;
        animation-delay: 250ms;
    }

    .delay2 {
        animation-delay: 1.5s;
    }

    .delay3 {
        animation-delay: 3s;
    }

    .delay4 {
        animation-delay: 4.5s;
    }

    .delay5 {
        animation-delay: 6s;
    }
    .delay6 {
        animation-delay: 7.5s;
    }

    .delay7 {
        animation-delay: 9s;
    }
    .delay8 {
        animation-delay: 10.5s;
    }

    .user-answer:before{
        content: "\00a0 ";
    }
    .user-answer {
        font-size: 1.5rem;
        border-bottom: 5px solid #d93d01;
        margin-left: 3px;
        width: 2%;
        text-align: left;
    }
    .useranswer_container {
        margin-top: 35px;
        display:flex;
        justify-content:center;
        font-weight:bolder;

    }
    @keyframes float {
        0% {
            transform: translate3d(0, 600px, 0);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translate3d(0, -1000px, 0);
            opacity: 0;
        }
    }
    @keyframes fade {
        0%,100% { opacity: 0 }
       50% { opacity: 1 }
    }
$(function(){
       const allBalloons = $("body").find(".balloon");
       const allLetters = $("body").find(".balloon-hit-area");

       const question = ['T','A','I','L'];

       // randomise letter to start
       for (let i = 0; i < allBalloons.length; i++) {
           allLetters[i].innerHTML = generateLetter(1);
       }

       //Adding Event listeners
       for (let i = 0; i < allBalloons.length; i++) {
            //reset letters
           $(allBalloons[i]).on('animationiteration',function(e){
               $(allBalloons[i]).removeClass('burstboom'); // reset background-image;
                $(allBalloons[i]).attr('data-style',generateNumber(1));
               allLetters[i].innerHTML = generateLetter(1);
           });
       }

       var question_pointer = 0;
       $('.balloon-hit-area').on('click',function(e){

          $(this).closest('.balloon').addClass('burstboom');

          if($(this).text() === question[question_pointer]){
              $('div.user-answer').eq(question_pointer).text($(this).text());
              if(question.length-1 == question_pointer){
                  console.log("Done");
              }
              question_pointer++;
          }


       });

       function generateLetter(length) {
           var result = "";
           var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
           var charactersLength = characters.length;
           for (var i = 0; i < length; i++) {
               result += characters.charAt(Math.floor(Math.random() * charactersLength));
           }
           return result;
       }
       function generateNumber(length) {
           var result = "";
           var characters = "123";
           var charactersLength = characters.length;
           for (var i = 0; i < length; i++) {
               result += characters.charAt(Math.floor(Math.random() * charactersLength));
           }
           return result;
       }
   });
Run Pen

External CSS

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js
  2. https://code.jquery.com/jquery-3.6.0.min.js