Uploading photos via ajax, when uploading 2 or more photos, without reloading the page, it shows that I uploaded 1 photo, how to fix ajax?

Question

AJAX

Hello.
As I understand it, the matter is in the script that is involved with ajax.

When uploading photos, 2 or more, it shows without reloading the page what 1 uploaded, although it loaded 2 or more photos, but if you press f5, refresh the page, you can see all those photos that you have uploaded at the moment.
I understand that the problem is in the processing of the display in js.

How to make it so that without reloading the page, it shows the pictures that it has uploaded at the moment.

js

<script>
  jQuery(document).ready(function($) {
    $(document).on('submit', '#komfort', function(event) {
      $('#komfort .message-box').html('');
      let form = this;
      event.preventDefault();
      let formLoad = new FormData($(form)[0]);
      formLoad.append('ajax', 1);
      $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        dataType: 'json',
        data: formLoad,
        beforeSend: function() {
          App.showLoader();
        },
        complete: function() {
          App.hideLoader();
        },
        success: function(d) {
          if (d.status == 'success') {
            App.hideLoader();
            if (d.image_is) {
              $('#photoBox').append('<div class="fotoadmin"><div class="fotoadminnn"><a href="/media/uploads/prozhivanie/' + d.image.filename + '" target="_blank"><img src="/media/uploads/prozhivanie/small/small-' + d.image.filename + '" width="150px"></a><br><a href="/admin/prozhivanie/delimg/' + d.image.id + '">Удалить</a> | <a href="/admin/prozhivanie/mainimg/' + d.image.id + '">Главная</a></div></div>');
            }
            $('#images_input').val('');
            App.bootstrap.addAlert('#komfort .message-box', 'success', d.message);
          }
          if (d.status == 'error') {
            // App.addAlert(5000, 'error', d.message);
            App.bootstrap.addAlert('#komfort .message-box', 'error', d.message);
          }
          App.hideLoader();
        },
        error: function(e) {
          App.hideLoader();
          // App.addAlert(5000, 'error', e.message);
          App.bootstrap.addAlert('#komfort .message-box', 'error', e.statusText);
        },
        cache: false,
        contentType: false,
        processData: false
      });
    });
  });
</script>

Here is the same piece of code that is updated via ajax to show how many photos have been uploaded.

$('#photoBox').append('<div class="fotoadmin"><div class="fotoadminnn"><a href="/media/uploads/prozhivanie/' + d.image.filename + '" target="_blank"><img src="/media/uploads/prozhivanie/small/small-' + d.image.filename + '" width="150px"></a><br><a href="/admin/prozhivanie/delimg/' + d.image.id + '">Удалить</a> | <a href="/admin/prozhivanie/mainimg/' + d.image.id + '">Главная</a></div></div>');

Code in the template for displaying photos

<div id="photoBox">
    <? if (!empty($data['images'])) : ?>
    <a name="img"></a>
    <? foreach ($data['images'] as $i => $image) : ?>
    <div class="fotoadmin">
      <div class="fotoadminnn">
        <a href="/media/uploads/prozhivanie/<?php echo $image->image ?>" target="_blank">
          <img src="/media/uploads/prozhivanie/small/small-<?php echo $image->image ?>" width="150px">
        </a>
        <br>
        <a href="/admin/prozhivanie/delimg/<?php echo $image->id ?>">Удалить</a>
        <? if ($image->id != $data['image_id']): ?>
        | <a href="/admin/prozhivanie/mainimg/<?php echo $image->id ?>">Главная</a>
        <? else: ?>
        | <b>Главная</b>
        <? endif ?>
      </div>
    </div>
    <? endforeach ?>
    <? endif ?>
  </div>