Tengo una llamada AJAX que permite seleccionar un elemento, estoy mostrando el elemento seleccionado con un fondo más oscuro y el icono marcado como seleccionado.

Puedo cambiar el fondo pero cuando intento cambiar el icono no funciona. Alguien me puede explicar que estoy haciendo mal?

aqui esta el codigo

 $("#accounts-list").on('click', '.nav-link', function () { var object_id = $(this).data('object-id'); $.ajax({ url: "url_to_ajax_call.php", data: { 'account_id': object_id }, type: 'POST', success: function (response) { // remove class where previously selected $(".nav-link").removeClass("bg-soft-primary"); // background $(".nav-link>span.fa-check-circle").removeClass("fa-check-circle").addClass("fa-circle"); // remove checked icon // apply selected class to the new item let item = $('.nav-link[data-object-id=' + object_id + ']'); item.addClass('bg-soft-primary'); // apply background $(item + ">span.fa-circle").removeClass("fa-circle").addClass("fa-circle"); // select checked icon } }) })

 <div id="accounts-list"> <ul class="nav"> <li class="nav-item"> <div class="nav-link nav-link-card-details bg-soft-primary" data-object-id="1"> <span class="far fa-check-circle"></span> Item 1 </div> </li> <li class="nav-item"> <div class="nav-link nav-link-card-details" data-object-id="2"> <span class="far fa-circle"></span> Item 2 </div> </li> <li class="nav-item"> <div class="nav-link nav-link-card-details" data-object-id="3"> <span class="far fa-circle"></span> Item 3 </div> </li><li class="nav-item"> <div class="nav-link nav-link-card-details" data-object-id="4"> <span class="far fa-circle"></span> Item 4 </div> </li> </li> </ul> </div>

Gracias