jQuery - Remove hidden attribute not working

Question

This is my .NET Core code of the view. When Red is selected, the FruitDate field should show up. When All is selected, the FruitDate has to be cleared and hidden.

<div class="form-group">
    <label asp-for="FruitsIncluded">*Fruits to be included</label><br/>
    <input type="radio" asp-for="FruitsIncluded" class="notification-option" value="ALL" /><b> All</b> &nbsp;
    <input type="radio" asp-for="FruitsIncluded" class="notification-option" value="Red" /><b> Red Fruits</b> <br/><br/>
                
    @if (!string.IsNullOrEmpty(Model.FruitsIncluded) && Model.FruitsIncluded == "Red")
    {
        <input asp-for="FruitDate" class="form-control date-mask" />
    }
    else{
        <input asp-for="FruitDate" class="form-control date-mask" type="hidden" />
    }
</div>

My jQuery code: The code debugging works fine and the if else condition works fine, but none of the code shows the FruitDate input.

$(document).on("change", "input[type=radio][name=FruitsIncluded]", function() {
    var lastUpdatedRadio = this.value;
    
    if (lastUpdatedRadio == "Red") {
        //None of this code works.
        $('#FruitDate').show();
        $('#FruitDate').removeAttr('hidden');
        $("#FruitDate").prop("hidden", false);    

    } else {
        $('#FruitDate').hide();
        $('#FruitDate').attr('type', 'hidden');
        $('#FruitDate').val(''); // Clear the value
    }
});

Answer 1

You should set the #FruitDate element for the type attribute to "text" (default).

if (lastUpdatedRadio == "Red") {
    //None of this code works.
    $('#FruitDate').show();
    $('#FruitDate').attr('type', 'text');  

    // Or
    // $('#FruitDate').attr('type', '');  
}