Prompt Title: Modal with dynamic elements.

Чтобы показывать следующий элемент массива после смены цвета одного элемента, можно объявить переменную currentColorIndex, которая будет хранить индекс текущего элемента в массиве colors. После смены цвета элемента, индекс будет увеличиваться на 1, и следующий элемент будет выбран из массива и показан в модальном окне.

Вот пример кода с добавлением этой функциональности:

javascriptCopy code
$(document).ready(function() {

  // Заданный массив
  var colors = ['red', 'green', 'black'];
  
  // Текущий индекс элемента массива
  var currentColorIndex = 0;

  // Показываем первое модальное окно при нажатии на кнопку
  $('#my-btn').click(function() {
    $('#my-modal').modal('show');
  });

  // Обработка нажатия кнопки "Далее" в первом модальном окне
  $('#next-modal').click(function() {

    // Получаем значение input
    var quantity = $('#quantity').val();

    // Скрываем первое модальное окно
    $('#my-modal').modal('hide');

    // Показываем следующий элемент массива
    showNextColor();

  });

  // Функция для показа следующего элемента массива
  function showNextColor() {

    // Если текущий индекс равен длине массива, значит, все элементы были показаны, завершаем функцию
    if (currentColorIndex === colors.length) {
      return;
    }

    // Получаем текущий элемент из массива
    var currentColor = colors[currentColorIndex];

    // Увеличиваем индекс текущего элемента на 1 для выбора следующего элемента в массиве
    currentColorIndex++;

    // Показываем второе модальное окно
    $('#name-modal').modal('show');

    // Отображаем название элемента во втором модальном окне
    $('#element-name').text(currentColor);

    // Обработка нажатия кнопки "Далее" во втором модальном окне
    $('#next-modal-name').click(function() {

      // Скрываем второе модальное окно
      $('#name-modal').modal('hide');

      // Показываем третье модальное окно
      $('#color-modal').modal('show');

      // Изменяем цвет элемента в третьем модальном окне на "красный"
      $('#element-name-color').css('color', 'red').text(currentColor);

      // Обработка нажатия кнопки "Далее" в третьем модальном окне
      $('#next-modal-color').click(function() {

        // Скрываем третье модальное окно и показываем следующий элемент массива
        $('#color-modal').modal('hide');
        showNextColor();

      });

    });

  }

});

В этом примере после смены цвета элемента на "красный" и нажатия кнопки "Далее" в третьем модальном окне, вызывается функция `showNext