Javascript　ルーレット

前提・実現したいこと

初期状態でストップボタンを押してから、スタートとストップボタンを交互に押していくと、１６マス目に色がつく前にスタートボタンが押せなくなってしまいます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>ルーレット</title> <link rel="stylesheet" href="roulette.css" /> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> var interval_id; var n; var i = 1; var go = 4; var nums = []; var ran_num; var idx;

    $(function() {
        
        $('.start').click(pre_start);
        $('.stop').click(stop_r);
        $('.reset').click(reset_r);

        
        for (n = 1; n <= go; n++) {
            
            $('#matrix').append("<tr id='target'>");
            
            $('#target').attr('id', 'tr' + n);

            var j = n * go;

            while (i <= j) {
                $('#' + 'tr' + n).append("<td id='target_td' class='case1'>" + i + '</td>');
                $('#target_td').attr('id', 'td' + i);
                i++;
            }
        }
        
        $('tr').each(function() {
            $('td', this).each(function() {
                nums.push($(this).text());
            });
        });
    });

    function pre_start() {
        $('.start').prop('disabled', true); 
        $('.stop').prop('disabled', false); 
        clearInterval(interval_id); 
        
        interval_id = setInterval(start_r, 50);
        $('#' + 'td' + ran_num).addClass('case4');
    }

    function start_r() {
       
        $('#' + 'td' + ran_num).removeClass('case2');
        $('#' + 'td' + ran_num).addClass('case1');

        ran_num = nums[Math.floor(Math.random() * nums.length)];

        $('#' + 'td' + ran_num).addClass('case2');
    }

    function stop_r() {
        clearInterval(interval_id); 
        $('.stop').prop('disabled', true); 
        $('.start').prop('disabled', false); 

        $('#' + 'td' + ran_num).addClass('case3');

        idx = $.inArray(ran_num, nums);
        nums.splice(idx, 1);


        if (nums.length < 1) {
            $('.start').prop('disabled', true); 
        }
    }

    function reset_r() {
        clearInterval(interval_id);
        $('.start').prop('disabled', false);
        nums = []; 
        ran_num = 0;
        
        $('td').removeClass('case1 case2 case3 case4');
        $('td').addClass('case1');
    
        $('tr').each(function() {
            $('td', this).each(function() {
                nums.push($(this).text());
            });
        });
    }
</script>

</head> <body> <div id="roulette"> <table id="matrix"></table> <div class="button"> <button class="start">スタート</button> <button class="stop">ストップ</button> <button class="reset">リセット</button> </div> </div> </body> </html>