Как реализовать переключение вкладок на HTML/CSS/JS в ASP .Net Core?

У меня есть следующая HTML разметка во View в Asp .Net Core:

<!-- форма у которой блоки для выбора вкладок -->
<!-- нажимаю на первый блок - открывается первый блок в форме "description" -->
<form class="services">
    <div class="serv">
        <p style="cursor: pointer" onclick="show(1)"> Название услуги </p>
    </div>
</form>
<form class="services">
    <div class="serv">
        <p style="cursor: pointer" onclick="show(2)"> Название услуги </p>
    </div>
</form>
<form class="services">
    <div class="serv">
        <p style="cursor: pointer" onclick="show(3)"> Название услуги </p>
    </div>
</form>

<!-- форма у которой блоки в виде компонентов -->
<form class="description">

<!-- первый блок -->

    <div class="serv_name" id="n\1" style="visibility: hidden;">
        <p>Название услуги</p>
    </div>
    <div class="serv_text" id="d\1" style="visibility: hidden;">
        <p id="description">Описание сервиса</p>
    </div>
    <div class="serv_price" id="p\1" style="visibility: hidden;">
        <p id="sr">Объём услуги</p>
        <p class="price">Цена услуги</p>
    </div>
    <div class="serv_time" id="t\1" style="visibility: hidden;">
        <p id="sr">Время выполнения</p>
        <p class="time">N-минут</p>
    </div>
    <div class="serv_price_sum" id="ps\1" style="visibility: hidden;">
        <p id="sr">Стоимость</p>
        <p class="price" id="price">Много</p>
    </div>
    <div class="serv_time_sum" id="ts\1" style="visibility: hidden;">
        <p id="sr">Длительность</p>
        <p class="time" id="time">Много</p>
    </div>
    <div class="user" id="u\1" style="visibility: hidden;">
        <p id="us">Укажите свои параметры</p>
        <input type="number" name="" id="area" placeholder="Сколько?">
    </div>

<!-- второй блок -->

    <div class="serv_name" id="n\2" style="visibility: hidden;">
        <p>Название услуги</p>
    </div>
    <div class="serv_text" id="d\2" style="visibility: hidden;">
        <p id="description">Описание сервиса</p>
    </div>
    <div class="serv_price" id="p\2" style="visibility: hidden;">
        <p id="sr">Объём услуги</p>
        <p class="price">Цена услуги</p>
    </div>
    <div class="serv_time" id="t\2" style="visibility: hidden;">
        <p id="sr">Время выполнения</p>
        <p class="time">N-минут</p>
    </div>
    <div class="serv_price_sum" id="ps\2" style="visibility: hidden;">
        <p id="sr">Стоимость</p>
        <p class="price" id="price">Много</p>
    </div>
    <div class="serv_time_sum" id="ts\2" style="visibility: hidden;">
        <p id="sr">Длительность</p>
        <p class="time" id="time">Много</p>
    </div>
    <div class="user" id="u\2" style="visibility: hidden;">
        <p id="us">Укажите свои параметры</p>
        <input type="number" name="" id="area" placeholder="Сколько?">
    </div>

<!-- третий блок -->

    <div class="serv_name" id="n\3" style="visibility: hidden;">
        <p>Название услуги</p>
    </div>
    <div class="serv_text" id="d\3" style="visibility: hidden;">
        <p id="description">Описание сервиса</p>
    </div>
    <div class="serv_price" id="p\3" style="visibility: hidden;">
        <p id="sr">Объём услуги</p>
        <p class="price">Цена услуги</p>
    </div>
    <div class="serv_time" id="t\3" style="visibility: hidden;">
        <p id="sr">Время выполнения</p>
        <p class="time">N-минут</p>
    </div>
    <div class="serv_price_sum" id="ps\3" style="visibility: hidden;">
        <p id="sr">Стоимость</p>
        <p class="price" id="price">Много</p>
    </div>
    <div class="serv_time_sum" id="ts\3" style="visibility: hidden;">
        <p id="sr">Длительность</p>
        <p class="time" id="time">Много</p>
    </div>
    <div class="user" id="u\3" style="visibility: hidden;">
        <p id="us">Укажите свои параметры</p>
        <input type="number" name="" id="area" placeholder="Сколько?">
    </div>
</form>

<!-- Здесь в блоке JS я делаю видимыми элементы определенного блока в форме description -->

<script>
    function show(id) {
        for (let i = 1; i < 4; i++) {
            if (i == id) {
                document.getElementById("n\\" + String(id)).style.visibility = "visible";
                document.getElementById("d\\" + String(id)).style.visibility = "visible";
                document.getElementById("p\\" + String(id)).style.visibility = "visible";
                document.getElementById("t\\" + String(id)).style.visibility = "visible";
                document.getElementById("ps\\" + String(id)).style.visibility = "visible";
                document.getElementById("ts\\" + String(id)).style.visibility = "visible";
                document.getElementById("u\\" + String(id)).style.visibility = "visible";
            }
            else {
                document.getElementById("n\\" + String(i)).style.visibility = "hidden";
                document.getElementById("d\\" + String(i)).style.visibility = "hidden";
                document.getElementById("p\\" + String(i)).style.visibility = "hidden";
                document.getElementById("t\\" + String(i)).style.visibility = "hidden";
                document.getElementById("ps\\" + String(i)).style.visibility = "hidden";
                document.getElementById("ts\\" + String(i)).style.visibility = "hidden";
                document.getElementById("u\\" + String(i)).style.visibility = "hidden";
            }
        }
        console.log(id);
    }
</script>

Сразу прошу не предлагать мне сделать три разные формы description и скрывать/показывать их тогда, когда мне это нужно, так как я разворачиваю эту вёрстку на Asp .Net и все данные этой формы мне нужно отправлять на контроллер.