JS该功能在localhost上运行良好，但在实时服务器上无法正常运行

Question

我在localhost中使用javascript，并且效果很好， 但是当我将脚本上传到实时服务器后，它无法运行，为什么？

 <ul class="list-form-column">
                                <li>
                                    <label class="radio">
                                    <input id="radio11" type="radio" name="radio2" value="cod" checked>
                                    <span class="outer"><span class="inner"></span></span>COD</label>
                                </li>
                                <li>
                                    <label class="radio">
                                    <input id="radio12" type="radio" name="radio2" value="paypal">
                                    <span class="outer"><span class="inner"></span></span>PAYPAL</label>
                                </li>
                            </ul>   
                            <form name="paymentForm" id="paymentForm" action="{{ url('/place-order-cod') }}" method="post"> {{ csrf_field() }}
                                <div class="payment-options">
                                <input type="hidden" name="grand_total" id="grand_total" value="{{ $grand_total }}">
                                    <span>
                                        <label><strong></strong></label>
                                    </span>
                                    <span style="align-items: center; display: flex; justify-content: center;">
                                        <input class="cod btn" type="submit" value="PLACE ORDER" style="width: 250px;">
                                    </span>
                                </div>
                            </form>
                            <form name="paymentForm" id="paymentForm" action="{{ url('/place-order') }}" method="post"> {{ csrf_field() }}
                                <div class="payment-options">
                                <input type="hidden" name="grand_total" id="grand_total" value="{{ $grand_total }}">
                                    <span>
                                        <label><strong></strong></label>
                                    </span>
                                    <span style="align-items: center; display: flex; justify-content: center;">
                                        <input name="submit" type="image" src="{{ asset('frontend/images/paypal.png') }}" class="paypal" style="display: none; margin-top: -45px">
                                    </span>
                                </div>
                            </form>

上面是我的html代码。

<script type="text/javascript">
$(document).ready(function() {
  $('input[name=radio2]:radio').change(function(e) {
    var value = e.target.value.trim()

    $('[class^="paymentForm"]').css('display', 'none');

    switch (value) {
      case 'cod':
        $('.cod').show()
        $('.paypal').hide()
        break;
      case 'paypal':
        $('.paypal').show()
        $('.cod').hide()
        break;
      default:
        break;
    }
  })
})
</script>

这是我放入主文件中的脚本代码。请帮助，它在本地主机上运行良好。它应该隐藏该按钮并显示另一个按钮，但是在实时服务器上它什么也不做。