Подсчитайте ввод внутри div и добавьте +1 к каждому jquery

Я пытаюсь создать слайдер, и до сих пор я создал все правильно, за исключением того, что не знаю, как подсчитывать поля ввода с jquery и каждый раз увеличивать число при выполнении действия.

У меня есть 3 действия на моем слайде. Добавление слайда, удаление слайдов и сортировка слайдов (для сортировки я использую jquery sortable для перемещения элементов вверх и вниз)

Но основная проблема заключается в том, чтобы иметь возможность сохранять слайды правильно. Мне нужно, чтобы каждое поле сортировалось по номеру массива.

Например, вот мое поле ввода на php-странице.

        $output .= '<div class="repeat-loop">';

        if( is_array( $values ) ) foreach ( (array)$values as $value ){

            $output .= '<div class="repeat-group">';
            $output .= '<input class="input" name="slideshow[0]" type="text" value="" />';
            $output .= '<a class="delete-row button" href="#">'. __('Remove') .'</a>';

            $output .= '</div>';

            $count++;
        }

        $output .= '<div class="repeat-group empty-slide hidden">';
        $output .= '<input class="input" data-rel="slideshow" type="text" value="" />';
        $output .= '<a class="delete-row button" href="#">'. __('Remove') .'</a>';
        $output .= '</div>';


        $output .= '<a id="add-slide" class="button" href="#">Add slide</a>';

        $output .= '</div>';

поэтому, когда в базе данных есть слайды, он будет выводить

<input class="input" name="slideshow[0]" type="text" value="" />
<input class="input" name="slideshow[1]" type="text" value="" />
<input class="input" name="slideshow[2]" type="text" value="" />

и вот сценарий, который я сейчас использую как работающий

$('#add-slide').on('click', function() {

    //Get parent element
    var loop = $('repeat-loop'); // .of-repeat-loop

    // Count all repeat group div's
    var count = loop.children('.repeat-group').not('.empty-slide').length;

    //Add new slide
    var new_slide = loop.find('.empty-slide').clone(true).removeClass('empty-slide hidden').insertBefore('#add-slide');

    var input = new_slide.find('input');

    var input_name = input.attr('data-rel');

    input.attr('name', input_name + '[' + ( count ) + ']');

    });

Но это работает только тогда, когда я хочу добавить новый слайд, он подсчитывает количество.repeat-group и добавляет +1 к следующему слайду.

Проблема в том, что это просто добавляет +1 к числу слайдов

Поэтому, если у меня есть 3 слайда, я бы

slideshow[0]
slideshow[1]
slideshow[2]

и когда я удаляю один слайд, пусть говорят средний, чем я остаюсь с

slideshow[0]
slideshow[2]

и когда я пытаюсь добавить новый слайд, скрипт будет снова подсчитывать количество слайдов начиная с 0 и добавлять число к следующему слайду.

так что у меня теперь будет

slideshow[0]
slideshow[2]
slideshow[2]

Мне нужно всегда подсчитывать количество полей ввода всякий раз, когда # new-slide,.delete-row или.sort запускается и меняет число на поля ввода, поэтому мне всегда нравится

slideshow[0]
slideshow[1]
slideshow[2]
slideshow[3]

Поэтому я всегда могу сохранить массив в базе данных, отсортированный правильно.

Небольшое обновление

Благодаря OlivierH я выяснил, как снова менять номера при удалении слайда теперь осталось только выяснить, как изменить количество слайдов при перетаскивании слайдов для их использования.

Это обновленный код, работающий до сих пор.

$('#add-slide').on('click', function() {

    //Get parent element
    var loop = $(this).parent(); // .repeat-loop

    // Count all repeat group div's
    var count = loop.children('.repeat-group').not('.empty-slide').length;

    //Add new slide
    var new_slide = loop.find('.empty-slide').clone(true).removeClass('empty-slide hidden').insertBefore('#add-slide');

    var input = new_slide.find('input');

    var input_name = input.attr('data-rel');

    input.attr('name', input_name + '[' + ( count ) + ']');

    });


$('.repeat-group').on('click', '.delete-row', function() {
    $(this).parent().remove();

    var loop = $('.repeat-loop');

    var count = loop.children('.repeat-group').not('.empty-slide').each(function(i){

        var input = $(this).find('input');

        var input_name = input.attr('data-rel');

        input.attr('name', input_name + '[' + i + ']');
    });
});

$('.repeat-loop').sortable({
    placeholder: "ui-state-highlight"
});
$('.repeat-loop').disableSelection();