How to route a page using click handler in asp.net mvc?

Question

Hi Team

I have a razor from the form, basically the logic once i click the span icon it must route me to the next page(page does exist). I have tried to use jquery to call the actioname and its controller name, but it was not routing me directly but loads and do nothing and there are no js conflict when inspecting the element from the browser.

// view.cshmtl

@model SHEQ_NCR.Models.CapturingForm

@{
    ViewBag.Title = "SHEQ NCR Capturing Form";
    var url = Url.Action("CorrectiveCreate", "Home");
}
    <div class="container mt-105">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card" style="border: 3px solid red; border-radius: 10px;">
                    <!-- Added inline styles for border thickness and radius -->
                    <div class="card-body">
                        <br />
                        <div style="text-align: center;">
                            <img src="@Url.Content("~/Images/Sovereign-foods.jpg")" />
                        </div>
                        <br />
                        <h5 class="card-title text-center" style="color: red;">SHEQ NCR Capturing Form</h5><br />
                        <!--styling the buttons to navigate in between the pages-->
                        <style>
                            .icon {
                                font-weight: bold;
                                color: red;
                            }

                            .btn-red-icon {
                                background-color: transparent;
                                border: none;
                                padding: 0;
                                cursor: pointer;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }

                            .btn-group {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin: 20px auto; /* Adjust margin as needed */
                                max-width: 300px; /* Adjust width as needed */
                            }
                        </style>

                        <div class="btn-group">
                            <button class="btn btn-red-icon" id="leftButton">
                                <span class="icon">&#62;</span>
                            </button>
                            <span>Switch Pages</span>
                            <button class="btn btn-red-icon" id="rightButton">
                                <span class="icon">&#62;</span>
                            </button>
                        </div>
                        <!--tab navigation for next page-->
                        <script>
                            $(document).ready(function () {
                             $('#rightButton').click(function () {
                            // Use the Razor-defined URL in the jQuery code
                             
                            });
                            });
                        </script>