Как при клике добавить произвольные имена тегу span?

Question

[Genri_Rus]

Добрый день!

Хочу добавить новые объекты в модальное окно, но никак не могу понять как это сделать

Допустим на странице у меня нету определенных названий, как можно выводить их в модальное окно поочередно в теги ?

Вот пример:

const icon = $('.icon-right');
const modal = $('.modal');

$('.move').click(function() {
    let imgCat = $(this).parent().find('img').attr('src');
    
       
    let modalCat = '';
  
    for (let i in obj) {
       modalCat += '<div class="modal-item">'
       modalCat += '<img src="' + imgCat + '">'
       modalCat += '<span class="name-item"></span>'
       modalCat += '<span class="remove-item"><i class="fa fa-times" aria-hidden="true"></i></span>'
       modalCat += '</div>';
    }
  
    if ($('.move').is(this)) {
      if (!modal.children().is('.modal-item')) modal.text('Каталог');
    } else {
        modal.removeClass('show-item').text('Здесь ничего нет');
    }
  
    modal.addClass('modal-open').append(modalCat);
  
    setTimeout(function() {
      $('.modal-item').addClass('show-item');
    }, 80);
})

let nameOneItem = new Item(1, 'Name one');
let nameTwoItem = new Item(2, 'Name two');

Мне нужно, чтобы в модальном окне было что-то типа такого:

<div class="modal-item"><img src="путь к картинке">''<span class="name-item">тут сам объект Name one</span><span class="remove-item"><i class="fa fa-times" aria-hidden="true"></i></span></div>

<div class="modal-item"><img src="путь к картинке">''<span class="name-item">тут сам объект Name two</span><span class="remove-item"><i class="fa fa-times" aria-hidden="true"></i></span></div>

Вот более наглядный пример: https://codepen.io/Genri_Rus/pen/eajaQo

Comments

[Genri_Rus]

toxic-toster, да )

Но чтобы только в цикле было:

let imgCat = $(this).parent().find('img').attr('src');

    let modalCat = '';
  
    for (let i in obj) {
       modalCat += '<div class="modal-item">'
       modalCat += '<img src="' + imgCat + '">'
       modalCat += '<span class="name-item">Тут название из объекта new Item</span>'
       modalCat += '<span class="remove-item"><i class="fa fa-times" aria-hidden="true"></i></span>'
       modalCat += '</div>';
    }

Дело в том, что у меня на странице уже есть картинки:

<div>
  <p class="img"><img src="https://picsum.photos/30">
  <button class="move">Переместить</button>
  </p>
</div>

<div>
  <p class="img"><img src="https://lorempixel.com/30/30/technics">
  <button class="move">Переместить</button>
  </p>
</div>

А вот тегов span c названиями на странице нет

И я хотел, чтобы в цикле поочередно (ну как служебная переменная this) выводились в модальное окно все картинки и сам span при клике по кнопке "Переместить"

Я пытался создать новые объекты с названиями:

let nameOneItem = new Item(1, 'Name one');
let nameTwoItem = new Item(2, 'Name two');

Но не знаю, как их подставить в самом цикле в тег span

[Genri_Rus]

toxic-toster, ну мне нужно при клике, чтобы в модальном окне появлялся только один элемент

Т.е. не все сразу, а только один

Может вы знаете как это можно сделать на более наглядном примере ?

Мне получается при первом клике на кнопку нужно показать в модальном окне в теге span 'Name one'
А при втором клике на кнопку "переместить" - название в теге span 'Name two'

[Genri_Rus]

toxic-toster, вы меня неправильно поняли или не сможете показать пример ? )

[Genri_Rus]

toxic-toster, по одной из кнопок переместить

[Genri_Rus]

toxic-toster, а это вообще сложно сделать ?