dynamic photo upload sortable

photo upload feature where you can add more photos. remove photos, and reorder them.

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div id="pic-section">

  <div class="ve-inner-rows">
    <button type="button" class="add_more">Add Photos</button>
  </div>

  <div id="pic-con">
  </div>
</div>

CSS

#pic-section {
  background: #f3f3f3;
  width: 100%;
  float: left;
  padding: 20px;
  overflow-y: auto;
  height: 210px;
  margin-top: 2em;
  margin-bottom: 2em;
}

.photo-upload-box {
  width: 150px;
  float: left;
  height: 150px;
  margin-right: 10px;
  background: #ccc;
  margin-bottom: 20px;
}

/*.photo-upload-box~.photo-upload-box~.photo-upload-box { margin-right: 0; }*/

.photo-upload-box input[type="file"] {
  padding: 0 !important;
  border: none !important;
}

.photo-upload-field {
  width: 100%;
  float: left;
}

.photo-upload-settings label,
.photo-upload-settings input {
  float: left;
  width: 115px !important;
}

.photo-upload-settings label {
  text-align: left;
  margin-top: 8px;
}

.photo-upload-settings {
  display: inline-block;
  width: 99px;
  margin: 0px auto;
}

.add_more {
  float: right;
}

.pic-left,
.pic-right,
.pic-remove {
  float: left;
  width: 33px;
}

.photo-upload-settings .fas {
  font-size: 1.5em;
}

.ve-rows {
  float: left;
  width: 100%;
  clear: both;
  margin-top: 2em;
}

.ve-inner-rows {
  float: left;
  width: 100%;
  clear: both;
}

img {
  max-width: 100%;
}

JavaScript

// MOVE LEFT AND RIGHT FUNCTION
$(function() {
  $("#pic-con").sortable();
  $("#pic-con").disableSelection();


  $(document).on('click', '.pic-left', function() {
    var current = $(this).parents(':eq(1)');
    current.prev().before(current);
  });

  $(document).on('click', '.pic-right', function() {
    var current = $(this).parents(':eq(1)');
    current.next().after(current);
  });

  $('.add_more').click(function() {
    var totalItems = $('div.photo-upload-box').length + 1;
    $('#pic-con').append('<div class="photo-upload-box"><div class="photo-upload-img"><img src="https://cdn4.buysellads.net/uu/1/3386/1525211184-62491.png" /></div><div class="photo-upload-field"><input type="file" name="files" class="files" accept="image/png, image/jpeg, image/jpg" /><input type="hidden" name="file1" /></div><div class="photo-upload-settings"><div class="pic-left"><i class="fas fa-angle-left"></i></div><div class="pic-right"><i class="fas fa-angle-right"></i></div><div class="pic-remove remove"><i class="fas fa-times"></i></div>div <span class="this-item-index"></span> out of <span class="total-item-count"></span></div><div class="photo-custom-time" style="display:none"><label>Duration time: </label> <input type="text" /></div></div>');

    updateIndexes();
    updateTotal();

  });

  // REMOVE FUNCTION
  $(document).on("click", ".remove", function(e) {
    e.preventDefault();
    $(this).parents(':eq(1)').remove();
    updateIndexes();
    updateTotal();
  });

});

function updateIndexes() {
  $('#pic-con .this-item-index').each(function(index) {
    $(this).text(index + 1);
  });
}

function updateTotal() {
  var $totalItemCount = $('.total-item-count');
  var total = $totalItemCount.length;
  $totalItemCount.text(total);
}