Lucky Wheel but i need to limit the number of spin

as the topic says , i am doing a Wheel of Fortune / Lucky Wheel but i would like to limit the number of spins the guest can make. I am doing a little form at first for the player to enter his username and choose the number of spins.

First Form :

    <form action="functions/check_step.php" method="post" class="bg-light p-5">
                        <div class="text-center mb-4 mt-n4">
                            <h1 class="text-uppercase font-weight-bold">Spin The Wheel</h1>
                            <h6 class="text-uppercase"><span class="iconify mr-1 mt-n1 ml-n2" data-icon="simple-icons:onlyfans" data-width="24" data-height="24" style="color: lightblue; padding-top:-10px;"></span>onlyfans.com/melibabies</h6>
                        </div>
                        <hr>
                        <div class="text-center my-4">
                            <h4 class="text-uppercase font-weight-bold">Step 1 : CHOOSE YOUR PACKAGE</h4>
                        </div>
                        <div class="form-outline mb-4">
                            <input type="text" id="frm1_name" class="form-control" />
                            <label class="form-label" for="frm1_name">Your Username</label>
                        </div>
                        <div class="mb-4">
                            <select class="select" name="frm1_nbspin">
                                <option value="1">1 Spin</option>
                                <option value="2">2 Spins</option>
                                <option value="3">3 Spins</option>
                            </select>
                            <label class="form-label select-label">Choose your Package</label>
                        </div>
                        <div>
                            <button type="submit" name="frm1_submit" class="btn btn-primary btn-block">START</button>
                        </div>
                    </form>

Here is the Jscript for the wheel

function myfunction(){
    
    var x = 1024; //min value
    var y = 9999; // max value

    var deg = Math.floor(Math.random() * (x - y)) + y;

    document.getElementById('box').style.transform = "rotate("+deg+"deg)";

    var element = document.getElementById('mainbox');
    element.classList.remove('animate');
    setTimeout(function(){
        element.classList.add('animate');
    }, 5000); //5000 = 5 second
}

And here is my html page for the wheel (i dont include the css but if its required let me know i will post/add it.

<body>
    <div id="mainbox" class="mainbox">
        <div id="box" class="box">
            <div class="box1">
                <span class="span1"><b>Option1</b></span>
                <span class="span2"><b>Option2</b></span>
                <span class="span3"><b>Option3</b></span>
                <span class="span4"><b>Option4</b></span>
            </div>
            <div class="box2">
                <span class="span1"><b>Option5</b></span>
                <span class="span2"><b>Option6</b></span>
                <span class="span3"><b>Option7</b></span>
                <span class="span4"><b>Option8</b></span>
            </div>
        </div>

        <button class="spin" onclick="myfunction()">SPIN</button>
    </div>

    <script src="script.js"></script>
</body>

I am not really good with javascript I am really a beginner with it … i am better with html/css and php lol … So i really don’t know where to start to add that function of limited spins. Thanks already to the stackoverflow community for helping =)