I am trying to build a ludo game using JavaScript & Jquery. So I want the pieces to move step by step. So for that, I wrote this code -

        function moveHorse() {
    
        $('td > img').click(function(event){

    
            // ludo baby steps 
            newfunc = setInterval(function(){
              //Some Code
            },300);
            setTimeout(function(){
                clearInterval(newfunc);
            }, randomDice*300);
        });
    }

The code is working really well. Interval is stopped based on the dice number. But it works only for one time for each player.

When the user clicks on the pieces for the second time the interval is set but it never stops. I found the issue and it's happening bcoz, after the first try, the Interval is executed multiple times in a single execution.

I just want to know how I can fix it.

Please check this video to better understand my issue - https://youtu.be/7d8A8qB5TG8