Div заменяется при попытке разместить рядом другой div с таким же именем класса

Question

Проблема:

У меня есть выпадающее меню, в котором можно выбрать цвета. Когда выбран цвет, раскрывающееся меню закрывается, и выбранный цвет представляется в виде блока div с фоновым изображением, установленным на изображение с выбранным цветом.

Это просто способ разрешить человеку использовать страницу знать, какие цвета они выбрали. Если они хотят выбрать больше цветов, они могут go вернуться в меню цветов и выбрать другой цвет. Когда это происходит, новый выбранный цвет должен быть помещен рядом с ранее выбранным цветом.

Что я пробовал:

Я использую фоновые изображения для представления цвета. Во всяком случае, я не могу получить желаемый эффект. Первый выбранный цветовой блок просто заменяется новым. Я просмотрел много постов и попробовал .prepend (), .append (), .after (), .insertAfter ().

Я скопировал свой код на JSFiddle. У меня есть изображение по умолчанию, которое показывает, когда страница загружается, затем я пытаюсь добавить новый каждый раз, когда нажимается контейнер, содержащий блоки div.

Мой код:

HTML:

<div class="colour-boxes-container">
    <div class="colour-box" style="background-image: url('https://cdn.clipart.email/0197fe6d344ce508961ca63564ce8466_blue-square-clip-art-at-clkercom-vector-clip-art-online-_578-600.svg')"></div>
</div>

JS:

$(".colour-boxes-container").on('click', function() {


 alert("Clicked container");

  var newSelectedColour = $(".colour-box")
       .css("background-image", "url('https://media.istockphoto.com/photos/bright-brown-leather-texture-seamless-square-background-tile-r-picture-id958497414')")

  $(".colour-box:last").after(newSelectedColour);

});

CSS:

.colour-boxes-container {
  height: 55px;
  width: auto;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: left;
}

.colour-box {
  height: 33px;
  width: 33px;
  margin-right: 7px;
}

https://jsfiddle.net/m0c8q742/1/

Чего мне здесь не хватает?

Answer 1

Этот код является проблемой:

$(".colour-box")
       .css("background-image", "url('https://media.istockphoto.com/photos/bright-brown-leather-texture-seamless-square-background-tile-r-picture-id958497414')")

Этот код по сути говорит: «Найдите любые элементы на странице с помощью класса« color-box »и измените фоновое изображение CSS для этих элементов». Вместо создания нового элемента вы обновляете старый.

Если вы хотите создать новый элемент, вы можете сделать что-то вроде:

$(".colour-boxes-container").on('click', function() {
  var $div = $(document.createElement('div'));
  $div.addClass('colour-box');
  $div.css("background-image", "url('https://media.istockphoto.com/photos/bright-brown-leather-texture-seamless-square-background-tile-r-picture-id958497414')")
  $(".colour-boxes-container").append($div);
});