JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<form action="" class="deck-generator">
  <fieldset>
    <legend>Выбрать карты в колоду</legend>
    <label aria-label="Карта с эффектом Рывок. 2 атаки, 3 защиты.">
      <input type="checkbox" name="card[]" value="https://i.pinimg.com/236x/d2/87/c5/d287c5727c06c683ce274ac614756f12--heartstone-arenas.jpg">
      <img src="https://i.pinimg.com/236x/d2/87/c5/d287c5727c06c683ce274ac614756f12--heartstone-arenas.jpg">
    </label>
    <label aria-label="Карта с эффектом Рывок. 2 атаки, 3 защиты.">
      <input type="checkbox" name="card[]" value="https://miro.medium.com/max/326/1*zs-aFtdpEiF6J2NrZzEUzA.png">
      <img src="https://miro.medium.com/max/326/1*zs-aFtdpEiF6J2NrZzEUzA.png">
    </label>
    <label aria-label="Карта с эффектом Рывок. 2 атаки, 3 защиты.">
      <input type="checkbox" name="card[]" value="https://i.pinimg.com/736x/1c/9c/9b/1c9c9b94749d63389ca58d0844ce3138--game-background-game-icon.jpg">
      <img src="https://i.pinimg.com/736x/1c/9c/9b/1c9c9b94749d63389ca58d0844ce3138--game-background-game-icon.jpg">
    </label>
  </fieldset>
  <br>
  <button type="submit">Создать колоду</button>
</form>
<br>
<p>Выбранные карты:</p>
<div class="cards">

</div>

CSS

.cards{
  border: 1px solid red;
}

img {
  width: 100px;
};

JavaScript

var form = document.querySelector('.deck-generator')
form.addEventListener('submit', onGenerateDeck)

var cardsContainer = document.querySelector('.cards')


function onGenerateDeck(evt) {
  evt.preventDefault()
  var fd = new FormData(this)
  var cards = document.createDocumentFragment()
  var checkedValues = fd.values()
  for(var value of checkedValues) {
  	cards.append(createCard(value))
  }
  clearCards()
  fillCards(cards)
}

function createCard(value) {
  var card = document.createElement('img')
  card.src = value
  return card
}

function clearCards(){
  Array.from(cardsContainer.children).forEach(function(item){item.remove()})
}

function fillCards(cards){
  cardsContainer.append(cards)
}