How to change the Text and icon of a label using JS or Jquery - Asp.Net MVC

Question

I need to set the description (EnderecoTipoDescricao) and the icon (icon fa-home) at the event change of a SELECT. For each Row the "Addressdescription" field has an id whose index is incremented: id="panel-title[i] going from 0 to ... . When selecting an option in select, I take the Row Index and with it I can set the id field id="panel-title[i] corresponding to Row. I don’t know how to set the text and the current description icon according to the option selected in the selection (delivery or Other). Someone knows how to do it?

RAZOR

<h3 class="panel-title" id="panel-title[i]"><i class="icon fa-home" aria-hidden="true"></i>@Model.PessoasEnderecosViewModel[i].EnderecoTipoDescricao</h3>

<div class="col-md-4">
    <label asp-for="PessoasEnderecosViewModel[i].EnderecoTipoId" class="control-label lb-endereco-tipo">Tipo de Endereço</label>
    <select asp-for="PessoasEnderecosViewModel[i].EnderecoTipoId" asp-items="@Model.PessoasEnderecosViewModel[i].EnderecosTipos" data-id="@Model.PessoasEnderecosViewModel[i].EnderecoTipoId" title="Selecione uma opção" class="form-control sel-endereco-tipo"><option value=""></option></select>
    <span asp-validation-for="PessoasEnderecosViewModel[i].EnderecoTipoId" class="text-danger val-endereco-tipo"></span>
</div>  

JS

$('#div-enderecos').on("change", ".sel-endereco-tipo", function (e) {
    e.preventDefault();

    //Pegar o índice
    var rowIndice = $(this).closest('.row').index();

    //Setar o texto e o ícone do field  panel-title[rowIndice ]???????????
});

OPTIONS IN THE SELECT

1 - DELIVERY (CHANGE ICON TO fa-truck icon) 2 - OTHER (CHANGE ICON TO icon glyphicon glyphicon-Pushpin)

Answer 1

After a lot of research, I found a solution to my problem and I hope that it can help those who need it in the future:

SOLUTION:

$('#div-enderecos').on("change", ".sel-endereco-tipo", function (e) {
    e.preventDefault();

    var rowIndice = $(this).closest('.row').index();

    //Setar o Field
    var selectoption = document.getElementById("PessoasEnderecosViewModel_" + rowIndice + "__EnderecoTipoId");
    var optionText = selectoption.options[selectoption.selectedIndex].text;
    var enderecoTipoId = $("#PessoasEnderecosViewModel_" + rowIndice + "__EnderecoTipoId").val();
    var txt = document.getElementById('panel-title[' + rowIndice + ']');

    $("#PessoasEnderecosViewModel_" + rowIndice + "__EnderecoTipoDescricao").val(optionText);

    switch (enderecoTipoId) {
        case '1':                  
            txt.innerHTML = '<i class="icon fa-home" aria-hidden="true"></i> ' + optionText + '';
            break;
        case '2':
            txt.innerHTML = '<i class="icon fa-building" aria-hidden="true"></i> ' + optionText + '';
            break;
        case '3':
            txt.innerHTML = '<i class="icon glyphicon glyphicon-usd" aria-hidden="true"></i> ' + optionText + '';
            break;
        case '4':
            txt.innerHTML = '<i class="icon fa-truck" aria-hidden="true"></i> ' + optionText + '';
            break;
        case '5':
            txt.innerHTML = '<i class="icon glyphicon glyphicon-gift" aria-hidden="true"></i> ' + optionText + '';
            break;
        case '6':
            txt.innerHTML = '<i class="icon glyphicon glyphicon-wrench" aria-hidden="true"></i> ' + optionText + '';
            break;
        case '7':
            txt.innerHTML = '<i class="icon glyphicon glyphicon-pushpin" aria-hidden="true"></i> ' + optionText + '';
            break;
    }

});