move spans between divs

five divs with four spans and two empty divs. click on source div change border width, and on second click on target div, move first span from source div to target div and reset border width

by slawe

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .source-div, .target-div {
      width: 100px;
      height: 100px;
      border: 2px solid #000;
      margin: 10px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      transition: border-width 0.3s ease;
    }

    .color-span {
      width: 25px;
      height: 25px;
      display: inline-block;
      cursor: pointer;
      margin: 2px;
    }

    .red { background-color: red; }
    .green { background-color: green; }
    .blue { background-color: blue; }
    .yellow { background-color: yellow; }
  </style>
</head>
<body>

<div class="source-div" onclick="changeBorderWidth(this)">
  <span class="color-span red"></span>
  <span class="color-span green"></span>
  <span class="color-span blue"></span>
  <span class="color-span yellow"></span>
</div>

<div class="source-div" onclick="changeBorderWidth(this)">
  <span class="color-span red"></span>
  <span class="color-span green"></span>
  <span class="color-span blue"></span>
  <span class="color-span yellow"></span>
</div>

<div class="source-div" onclick="changeBorderWidth(this)">
  <span class="color-span red"></span>
  <span class="color-span green"></span>
  <span class="color-span blue"></span>
  <span class="color-span yellow"></span>
</div>

<div class="source-div" onclick="changeBorderWidth(this)">
  <span class="color-span red"></span>
  <span class="color-span green"></span>
  <span class="color-span blue"></span>
  <span class="color-span yellow"></span>
</div>

<div class="source-div" onclick="changeBorderWidth(this)">
  <span class="color-span red"></span>
  <span class="color-span green"></span>
  <span class="color-span blue"></span>
  <span class="color-span yellow"></span>
</div>

<div class="target-div" id="target1" onclick="moveToTarget(this)">
  <!-- The target div can initially be empty -->
</div>

<div...