Как обратиться к конкретному элементу из нескольких с одинаковым классом?

Пробовал так: ${$(this).find(cardImageEL).html()} - получаю undefined ..((

Как обратиться к конкретному элементу из нескольких с одинаковым классом?

Eugene Chefranov, не совсем, точнее, м.б. я не так объясняю)

Вот мой jQ-код:

var addBasketEL = $('.js-btnBasket');
var selectedContainerEL = $('.js-selectedContainer');

// Cards Content
var cardImageEL = $('.js-cardImage');
var cardCategoryEL = $('.js-cardCategory');
var cardNameEL = $('.js-cardName');
var cardPriceEL = $('.js-cardPrice');

function addSelectedCard(e) {
  e.append(`
    <article class="selected-card js-selectedCard">
      <div class="selected-card__image">
        ${cardImageEL.html()}
      </div>
          
      <div class="selected-card__text">
        <a href="#" class="cards__category">${cardCategoryEL.text()}</a>
          
        <h2 class="selected-card__name">
           ${cardNameEL.html()}
        </h2>
      </div>
          
      <span class="price selected-card__price">${cardPriceEL.text()}</span>
          
      <button class="btn__delete js-btnDelete"></button>
    </article>
    `);
}

// Program Execution
$(function () {
  addBasketEL.click(function () {
    if (selectedContainerEL.length) {
      $('.js-selectedCard').remove();

      $('button').removeClass('active');

      addSelectedCard(selectedContainerEL);

      $(this).addClass('active');
    } else {
      addSelectedCard(selectedContainerEL);

      $(this).addClass('active');
    }

    $('.js-btnDelete').click(function () {
      $(this).parent().remove();
    });
  });
});

И вот тут, когда я обращаюсь, допустим: к ${cardImageEL.html()} чтобы получить html-содержимое, получаю все cardImageEL, а мне нужно только содержимое конкретной карточки, по кнопке которой кликнули. Как это сделать?

Как обратиться к конкретному элементу из нескольких с одинаковым классом?

То есть, вот здесь:

$(function () {
  addBasketEL.click(function () {
    if (selectedContainerEL.length) {
      $('.js-selectedCard').remove();

      $('button').removeClass('active');

      addSelectedCard(selectedContainerEL);

      $(this).addClass('active');
    } else {
      addSelectedCard(selectedContainerEL);

      $(this).addClass('active');
    }

    $('.js-btnDelete').click(function () {
      $(this).parent().remove();
    });
  });
});

Когда к самой кнопке, по которой кликаешь, да, добавляется то, что нужно, а как быть с элементами по которым не кликают?)

Как обратиться к конкретному элементу из нескольких с одинаковым классом?

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

Как обратиться к конкретному элементу из нескольких с одинаковым классом?

Ок, спасибо!

Как разделить ячейки таблицы CSS по ширине поровну?

Сергей delphinpro, ок, благодарю Вас!

Как разделить ячейки таблицы CSS по ширине поровну?

Рома Зварич, Согласен, разница большая, да, Вы правы, JS - выход. Но, тут я просто "теоретизирвал на тему") А, вдруг уже тогда было можно)) Спасибо!

Как разделить ячейки таблицы CSS по ширине поровну?

Вот на grid все делится поровну:
https://codepen.io/iliyasold/pen/mdbQXXe

Подскажите, существуют ли какие-то варианты сделать также при display: table; ?

Как разделить ячейки таблицы CSS по ширине поровну?

Хм.., а, как же здесь они получаются:

Какое регулярное выражение подойдет для проверки номера телефона?

Маленький нюанс: [phone] такое пропускает тоже..) Нужно ограничить количество тире.