JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <h1> </h1>
    </header>

    <main>
        <ul>
            <li id='me_btn' class="me_btn">click</li>
            <li id='you_btn' class="you_btn">click</li>
        </ul>
    </main>

    <div class="random_box">
        <div class="outline">
            <p class="p">自 分</p>
            <div class="roulette" id="roulette1">0-29</div>
            <div id="hands1" class="action_text"> </div>
        </div>
        <div class="outline">
            <p class="p">相 手</p>
            <div class="roulette" id="roulette2">0-29</div>
            <div id="hands2" class="action_text"> </div>
        </div>
    </div>


    </div>


    <div class="text_box">
        <p id="gu_nav">0〜9 = グー</p>
        <p id="cho_nav">10〜19 = チョキ</p>
        <p id="par_nav">21〜29 = パー</p>
    </div>

    <div class="action_box">
        <div id="result_fin" class="fin_result">あなたの勝ち？負け</div>
        <div id="main_result" class='main_result'>結果 →click←</div>
    </div>
    <footer>
    </footer>

JavaScript

// ルーレット１の変数定義＿＿＿＿＿＿＿＿＿＿
        var click = 0;
        var timer = null;
        var value = Math.floor(Math.random() * 30);
        // ルーレット１の関数定義
        function stop() {
            clearInterval(timer);
            $('#roulette1').text(value);
        }
        function Random() {
            var value = Math.floor(Math.random() * 30);
            $('#roulette1').text(value);
        }
        // 自分ボタン クリックでルーレット１(自分)を開始 
        $('#me_btn').click(function () {
            if (click == 0) {
                timer = setInterval(Random, 80);
                click = click + 1;  //クリックはここで＋１回になっている
                $('#me_btn').text('stop')
                // ２回目のクリックでストップ

            } else if (click == 1) {
                stop();
                judge(); // 関数定義は下
            }
        });
        // 止まった数字で条件分岐
        // 0〜9 の時 グー
        // 10〜19 の時 チョキ
        // 21〜29 の時 パー
        function judge() {
            var result = ['グー', 'チョキ', 'パー'];
            $('#hands1').text(result[value]);
            if (value >= 0 && value <= 9) {
                $('#hands1').text(result[0]);
                $('#gu_nav').css('background-color', '#67ceff');
            } else if (value >= 10 && value <= 19) {
                $('#hands1').text(result[1]);
                $('#cho_nav').css('background-color', '#67ceff');
            } else {
                $('#hands1').text(result[2]);
                $('#par_nav').css('background-color', '#67ceff');
            }
        };

        // ルーレット２の変数定義＿＿＿＿＿＿＿＿＿＿＿
        var click2 = 0;
        var timer2 = null;
        var value2 = Math.floor(Math.random() * 30);
        // ルーレット２の関数定義
        function Random2() {
            var value2 = Math.floor(Math.random() * 30);
            $('#roulette2').text(value2);
        }
        function stop2() {
            clearInterval(timer2);
            $('#roulette2').text(value2);
        }
        $('#you_btn').click(function () {
            if (click2 == 0) {
               ...