move spans between divs

three divs with four spans and two empty divs. click on div with spans change border width, and on second click move first span from clicked div to second clicked 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, .other-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" onclick="moveSpan(this)"></span>
  <span class="color-span green" onclick="moveSpan(this)"></span>
  <span class="color-span blue" onclick="moveSpan(this)"></span>
  <span class="color-span yellow" onclick="moveSpan(this)"></span>
</div>

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

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

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

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

<script>
  var selectedDiv =...