Currently, I am working on a photo upload section that allows users to add and remove divs with the click of a button. You can see the functionality in action here -- fiddle
My main challenge now is getting the number counts to update correctly when a div is added, removed, or rearranged.
At the moment, the count increments properly when a new div is added, but it fails to update when a div is reordered or when other divs are removed.
// 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);
});
$(function(){
var div = 0;
// ADD MORE FUNCTION
$('.add_more').click(function(){
div++;
var numItems = $('div.photo-upload-box').length;
$('#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 '+div+' out of '+numItems+'</div><div class="photo-custom-time" style="display:none"><label>Duration time: </label> <input type="text" /></div></div>');
});
// REMOVE FUNCTION
$(document).on("click", ".remove", function(e) {
e.preventDefault();
$(this).parents(':eq(1)').remove();
var numItems = $('div.photo-upload-box').length;
});
})();