How to hide multiple divs when when label equals specific text

See more:

Javascript

HTML5

ASP.NET-Core

I want when the label content is Laptop hidden-panel2 and hidden-panel3 to be hidden and only hidden-panel to be shown. when I create the record from within the application it is working fine but when the record is added from the database it is not. what am I doing wrong.

What I have tried:

<label id="AssetType"> @Html.DisplayFor(model => model.AType </label>

Divs to hide

<div id="hidden-panel">
     <label class="label">@Html.DisplayFor(model => model.LaptopProcess)</label>
</div>

<div id="hidden-panel2">
     <label class="label">@Html.DisplayFor(model => model.pcProcess)</label>
</div>

<div id="hidden-panel3">
     <label class="label">@Html.DisplayFor(model => model.phoneProcess)</label>
</div>

Script to hide Divs

$(document).ready(function () {
    $("#AssetType").ready(function () {
        if ($('#AssetType').text() == 'Laptop') {
            $('#hidden-panel').show();
            $('#hidden-panel2').hide();
            $('#hidden-panel3').hide()
        }
    })
});