CSS Class is still displayed when CSS Display is set to none causing JScript ID issues

Question

I have a situation where I am stuck and do not know how to solve it. I have a contact page that has some calculations that need to be processed and it will not work with Display: block and Display: none.

My Code is displayed below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    .contactMobile{
        display: none;
    }
    
    .contactDesktop{
        display: block;
    }

    @media only screen and (max-width : 667px) {

        .contactMobile{
            display: block;
        }
        .contactDesktop{
            display: none;
        }
        }
</style>


<section class="contactDesktop" id="contact">
    <div class="container-fluid">
        <form asp-action="Contact" asp-controller="Home" method="POST" role="form" class="php-email-form">
            <input asp-for="Stats" type="hidden" value="99" />
            <table class="tg">
                <thead>
                    <tr>
                        <td class="tRow1">
                            contact Top Left
                        </td>
                        <td class="tRow2" rowspan="2">
                            <div class="form">
                                <div class="col-md-12 text-center">
                                    <div class="row contactDesktop" id="submit">
                                        <div id="chk">
                                            <div class="col-md-12" style="padding:10px!important;text-align:left;">
                                                <label class="text-lg-start">Add:</label>
                                                <input id="val1" style="max-width:30px;padding:5px;border:0;text-align:center;color:white" disabled>
                                                +<input id="val2" style="text-align:center;max-width:30px;padding:5px;border:0;color:white" disabled>
                                                =<input style="max-width:30px;padding:5px;" name="honey" id="honey" oninput="myFunction(this.value)">
                                            </div>
                                        </div>
                                        <div id="buttonCheck">
                                            <div class="col-md-12" style="padding:5px!important;">
                                                <div class="form-group sndBtn">
                                                    <button type="submit" style="border-radius:5px;">SEND</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="row">
                                        <div class="col-md-12 form-group" style="color:red; font-size:large; font-weight: 600;">
                                            <div class="loading">Loading</div>
                                            <div class="error-message"></div>
                                            <div class="sent-message" style="background: darkgreen;border-radius:5px;">Your message has been sent. Thank you!<br />We will respond ASAP.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="tRow3" rowspan="2">
                            Contact Right
                        </td>
                    </tr>
                    <tr>
                        <td class="tRow4">
                            Contact Bottom Left
                        </td>
                    </tr>
                </thead>
            </table>
        </form>
    </div>
</section>

<section class="contactMobile" id="contact">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-3 text-center" style="margin-top:25px;">
                Contact US
            </div>
            <div class="col-md-6" id="contactUs">
                <div class="form">
                    <form asp-action="Contact" asp-controller="Home" method="POST" role="form" class="php-email-form">
                        <input asp-for="Stats" type="hidden" value="99" />                      
                        <div class="col-md-12 text-center">
                            <div id="submit" class="contactMobile row">
                                <div id="chkM">
                                    <div class="col-md-12" style="padding:10px!important;text-align:left;">
                                        <label class="text-lg-start">Add:</label>
                                        <input id="val1M" style="max-width:30px;padding:5px;border:0;text-align:center;color:white" disabled>
                                        +<input id="val2M" style="text-align:center;max-width:30px;padding:5px;border:0;color:white" disabled>
                                        =<input style="max-width:30px;padding:5px;" name="honey" id="honey" oninput="myFunctionM(this.value)">
                                    </div>
                                </div>
                                <div id="buttonCheckM">
                                    <div class="col-md-12" style="padding:5px!important;">
                                        <div class="form-group sndBtn">
                                            <button type="submit" style="border-radius:5px;">SEND</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="row">
                                <div class="col-md-12 form-group" style="color:red; font-size:large; font-weight: 600;">
                                    <div class="loading">Loading</div>
                                    <div class="error-message"></div>
                                    <div class="sent-message" style="background: darkgreen;border-radius:5px;">Your message has been sent. Thank you!<br />We will respond ASAP.</div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>
</section>

<script type="text/javascript">
    var ranVal1 = Math.floor((Math.random() * 10), 2);
    var ranVal2 = Math.floor((Math.random() * 10), 2);
    var ranVal = Math.floor((ranVal1 + ranVal2), 2);
    $("#val1").val(ranVal1);
    $("#val2").val(ranVal2);
    $('#buttonCheck').css({ 'display': 'none' });

    function myFunction(val) {
        if (val == ranVal) {
            $('#buttonCheck').css({ 'display': 'block' });
            $('#chk').css({ 'display': 'none' });
            $("#Stats").val("200");
        }
    }
</script>

This only works to hide the desktop from view when I am in Mobile mode; however, the Math calculations are not working. Upon a Chrome Inspection, I noticed that even though the Desktop code was not visible on my monitor, it was still present on the html code and is affecting the JavaScript because the IDs are doubled.

Is there another way for me to only show the html code that is meant for either the Desktop or Mobile?