css of <ul> is lost when a .net page is postBack

Question

I have a html list and in each tag <i> place an icon, the user selects an icon and I get the value that I assign to the icon and the option that the user selects (icon) I highlight it with css styles, the problem I have is that when the form was sent, if the FieldValidator is activated by any field, data is not sent to the DB but the styles of the selected icon are lost. How to preserve the styles?

This is what it looks like when the icon is selected

and this is what it looks like when the data is sent the requiredField validator is activated and returns to the page again to show the wrong fields and the css is lost since the icon does not appear selected again

        $(document).ready(function () {
            
            var iconos = document.querySelectorAll('.fa');
            
            var input = document.getElementById('<%=txtIcono.ClientID%>');
            
            for (var i = 0; i < iconos.length; i++) {
                
                iconos[i].addEventListener('click', function () {
                    
                    input.value = this.className;
                });
            }

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}

.social-icons .fa {
    font-size: 1em;
}

.social-icons .fa {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa {
    border-radius: 50%;
}

.social-icons.icon-rounded .fa {
    border-radius: 5px;
}

.social-icons.icon-flat .fa {
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    background-color: blue;
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
}

.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.enlace > a:focus .fa {
    cursor: pointer;
    background-color: gold;
    border-radius: 50%;
}

<table>
                        <tr>
                            <td style="width: 126px">Seleccione un Icono:</td>
                            <td>
                                <ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
                                    <li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
                                </ul>
                                <asp:TextBox runat="server" ID="txtIcono" MaxLength="100" SkinID="txtGral" Width="168px" hidden="true"></asp:TextBox>
                                <asp:RequiredFieldValidator runat="server" ID="rfIcono" ControlToValidate="txtIcono" ErrorMessage="*Seleccione un icono para el anuncio." Display="Dynamic">*</asp:RequiredFieldValidator>
                            </td>
                        </tr>
</table>

Answer 1

Some pseudo code. file.aspx:

<%-- add hf --%>
<asp:HiddenField ID="hfID" runat="server">

file.js:

function onIconClick() {
//highlight Icon
var hf =document.getElementByID("hfID");
hf.value = hf.value + ";clickedIcon" 
} 
function onPageLoad() {
var hf =document.getElementByID("hfID");
var iconsToHighlight = hf.value.split(";");
for(i=0;i<iconsToHighlight. Length;i++) {
HighlightIcon(iconsToHighlight[i]) ;
} 
} 

I'm not sure but you might have to add the tag asp:scriptmanager to make the on pageload to work. Or if you use jquery i think its automatically included but don't take my word on it

Answer 2

You don't need to post back to validate data. use RequiredFieldValidator.EnableClientScript = true to validate in client side.