Two modal forms with PHP and jQuery

I have two modals (#U and #R) in the same HTML page and there is a form each in both of them with different action and different submission.

Both modals open and close sweet, but the second modal submission doesn’t work (#R in this case).

I tried to replace #R with #U, then the submission of #U doesn’t work (instead of #R before the change).

<div class="modal" id="U" style="width:50%;">

    <span class='span3'> X </span>

    <div class="container">

        <form onsubmit="return validateForm3()" action="usersReport.php" method="post">
                <!-- some inputs here -->
                <input type="submit" value="عرض التقرير" name="report3">
        </form>
        
    </div>
    
</div>


<div class="modal" id="R" style="width:50%;">

    <span class='span2'> X </span>
    
    <div class="container">
    
        <form onsubmit="return validateForm2()" action="retirsReport.php" method="post">
            <!-- some inputs here -->
            <input type="submit" value="عرض التقرير" name="report2">
        </form>
        
    </div>
    
</div>

the script in the same page:

<script>

    $(document).ready(function () {
        $('.U').click(function (e) {
            e.preventDefault();
            $('#U').css("display", "block");
        });

    });
    
    $(document).ready(function () {
        $('.span3').click(function (e) {
            e.preventDefault();
            $('#U').css("display", "none");

        });
    });
    
    $(document).ready(function () {
        $('.R').click(function (e) {
            e.preventDefault();
            $('#R').css("display", "block");

        });

    });
    
    $(document).ready(function () {
        $('.span2').click(function (e) {
            e.preventDefault();
            $('#R').css("display", "none");

        });
    });

    function validateForm2() {
        //some code here
    }

    function validateForm3() {
        //some code here
    }
    
</script>