Как скопировать все элементы с классом active, а не только первый встречный?

Question

[Dimtri]

Пытаюсь по клику скопировать в попап выделенные элементы списка - с классом active. Но копируется только первый встречный li.active. Дальше дело стопорится.

<div class="config-col">
  <div class="config-options-text">
    <ul>
      <li>
        <div>Электричество</div>
        <strong>275 000 ₽</strong>
      </li>
      <li class="active">
        <div>Отопление</div>
        <strong>313 500 ₽</strong>
      </li>
      <li class="active">
        <div>Водоснабжение</div>
        <strong>115 000 ₽</strong>
      </li>
      <li class="active">
        <div>Канализация</div>
        <strong>115 000 ₽</strong>
      </li>
    </ul>
  </div>
  <div class="config-button">
    <a href="#">Заказать проект</a>
  </div>
</div>

$('.config-button a').click(function (){
    var config_options = $(this).parents('.config-col').find('.config-options-text li.active').html();
    $('.popap-communications-row').html('<li>' + config_options + '</li>');
  })

Ожидаю, что в попапе, внутри <ul class="popap-communications-row"></ul> появится html всех выделенных <li>. Но появляется только первый встреченный - Отопление
Подскажите, пожалуйста, как мне доработать свой код, чтобы он хватал все выделенные <li>?

Answer 1

[drileb]

Нужно каждую отдельно брать и добавлять

$('.config-button a').click(function (){
	$(this).parents('.config-col').find('.config-options-text li.active').each(function( key, value ) {
		$('.popap-communications-row').append(value.outerHTML);
	});
 });

Comments

[Dimtri]

Да, это то, что надо. Спасибо)

Answer 2

[Alfieros]

Держи и не мучайся.

JS

let btn = document.querySelector('.config-button');
btn.addEventListener('click', () => {
  let conf = document.querySelectorAll('li.active');
  conf.forEach((elem) => {
    console.log(elem.textContent);
  });
});
});

jQuery

$(".config-button").click(() => {
	let conf = $("li.active").text();
	console.log(conf);
});