Quiero reordenar/clasificar automáticamente un div de acuerdo con el recuento de votos más alto una vez que se realiza una llamada ajax, probé muchos códigos y ninguno parece estar funcionando. A continuación se muestra el código.

 @foreach($candidates->sortByDesc("voteCount") as $candidate) <div class="col-md-6" id="{{$candidate->voteCount}}">// this is the div I want to reorder <div class="card"> <div class="card-header"> <h4 class="card-title" id="heading-multiple-thumbnails">{{$candidate->name}} {{$candidate->runningMate[0]->name}}</h4> <a class="heading-elements-toggle"> <i class="la la-ellipsis-v font-medium-3"></i> </a> </div> </div> </div> @endforeach

El JavaScript

 $('.castVoteForCandidateButton').on('click', function (e) { $("#voteCofirmStatus").hide(); $("#voteProccessStatus").show(); $.ajax({ type:'POST', url:'/vote', data:{candidateId : candidateId, _token: "<?php echo csrf_token(); ?>",name:name ,position:position}, success:function(data){ if(data.status =='ok' ){ setTimeout(function() {$('#voteProcessingModal').modal('hide');}, 500); $("#voteProccessStatus").hide(); $("#voteSuccessStatus").show().text('Nice job!,you have successfully voted for '+ data.name); $("#voteCount"+data.id).text(parseFloat(data.voteCount)+" Votes"); $("#confirmCandidateVoteButton"+data.id).hide(); var div = $("#voteCount"+data.id); div.animate({fontSize: "30px"}, "slow"); div.animate({fontSize: "17px"}, "slow"); const main = document.querySelector('#main');// this const divs = [...main.children];// is divs.sort((a, b) => a.id - b.id);// the divs.forEach(div => main.appendChild(div));// Latest code I tried and its not working }else{ $("#voteErrorStatus").show().text(data); } } }); } );