Загрузка фоток через ajax, при загрузке 2 или более фоток, без перезагрузки страницы, показывает что загрузил 1 фотку, как поправить ajax?

Question

[Антон Вебсайтовский]

Здравствуйте.
Я так понимаю дело в скрипте, который задействован с ajax.

При загрузке фоток, 2 и более, показывает без перезагрузки страницы что загрузил 1, хотя грузил 2 и более фоток, но если нажать f5, обновить страницу, то видно все те фото что загружал на данный момент.
Я так понимаю проблема в обработке отображения в js.

Как сделать, чтоб без перезагрузки страницы, показывал фотки что загрузил на данный момент.

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>

Вот тот самый кусок кода, который обновляется через ajax, чтоб показать сколько загрузил фоток.

$('#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>');

Код в шаблоне для вывода фоток

<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>