how sort appended data jquery

Question

I have one for loop that gets data from the server sorted descending, but in append() the data sort is not working. For example, the first row show in second position.

How can I append data exactly as it's sorted from the server side data?

$(document).on('click', '#jhchat', function() {
  $('.jhchat').find('.messagemoda').html('');
  var jus = '{{Auth::user()->id}}';
  
  $.ajax({
    url: '{{url("getuchats")}}',
    type: 'post',
    data: {
      _token: CSRF_TOKEN
    },
    success: function(data) {
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (data[0].s_id == jus) {
            var mid = data[i].r_id;
          } else {
            var mid = data[i].s_id;
          }
          $.ajax({
            url: '{{url("getchatdet")}}',
            type: 'post',
            data: {
              _token: CSRF_TOKEN,
              'mid': mid,
              'chid': data[i].id
            },
            success: function(res) {
              $('.jhchat').find('.messagemoda').append(`
                <div class="row mt-3 conv` + res.chat.id + `" alt="` + res.chat.id + `">
                  <div class="col-11 row mt-2 ads chads cchat` + res.chat.id + `" alt="` + res.chat.id + `" id="` + res.mid + `">
                    <div class="col-3" style="padding-left: 5px;">
                      <img src="` + res.img + `" alt="home" width="60" height="60" class="rounded-circle">
                    </div>
                    <div class="col-8">
                      <h6 class="mt-4 text-end">` + res.name + ' ' + (res.mescount > 0 ? '<span class="me-4" style="color: crimson;background-color: bisque;border-radius: 50%;padding-left: 5px;padding-right: 5px;">' + res.mescount + '</span>' : '') + `</h6>
                    </div>           
                  </div>
                  <div class="col-1 mt-4 ps-0 ms-0 float-start text-start" style="position: relative;">
                    <img src="{{url('images/menu.png')}}" alt="` + res.chat.id + `" width="32px" height="32px" class="hmenu" style="cursor: pointer;background-color: #eee;border-radius: 50%;padding:8px;">
                    <div class="smenu` + res.chat.id + ` jsmen">` + (res.justo > 0 ? '<a class="me-2 jsmenitem d-block" href="' + res.s + '">go store <img style="margin-right: 2rem;" src="{{url('images / arrow1.png ')}}" width="13px" height="13px"></a>' : '') + `
                      <p class="text-danger delconv mt-2 mb-0 me-2 jsmenitem" alt="` + res.chat.id + `" style="cursor: pointer;">delete <img style="margin-right: 3.4rem;" src="{{url('images/close1.png')}}" width="10px" height="10px"></p>
                    </div>
                  </div>
                </div>`);
            }
          });
        }
        $(".messagemoda").trigger("update");
      } else {
        $('.jhchat').find('.messagemoda').html('<div class="mt-5 text-center">no data</div>');
      }
    }
  });

  $('.adsopa').css('opacity', '0.3');
  $('.sidebarmenu').removeClass('active');
  $('.jhchat').css("display", "block");
  $('body').css('overflow-y', 'hidden');
});

Answer 1

You are reverting the sorting with append after .messagemoda . So if server is returning element A and B , it first appends A (ok for now) and you get .messagemoda , A . After you append B after .messagemoda , you get .messagemoda , B , A . So you have to append after the last element from server if it exists or after .messagemoda , if there are no elements present.

And as pointed out in the comments, you should get all data in one request if you have the backend, which can provide it as such. These multiple request could not be received in the order you send them - you have no control over the magic of the network if self.

Answer 2

i fetch all of the data need with a single request and problem is solved thanks every one to help and guid