I want to automatically reorder/sort a div according to the highest vote count once an ajax call is done, I have tried many thing codes and none seems to be working. Below is the code.

@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

The 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);
                                 
                             }
                       }
                     });  
         } );