JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="parent">
  <input type="text" value="" id="color-name">
  <input type="text" value="" id="color-value">
  <div class="currentSelectedColor" style=""></div>

  <hr>
  <div class="color-selection">
      <span class="swatch active" title="white" data-color="#FFFFFF" data-name="white" style="background-color: rgb(255,255,255);"></span>
      <span class="swatch" title="primary" data-color="#E91E63" data-name="primary" style="background-color: rgb(233, 30, 99);"></span>
      <span class="swatch" title="primary_dark" data-color="#C2185B" data-name="primary_dark" style="background-color: rgb(194, 24, 91);"></span>
      <span class="swatch" title="primary_light" data-color="#F8BBD0" data-name="primary_light" style="background-color: rgb(248, 187, 208);"></span>
      <span class="swatch" title="accent" data-color="#CDDC39" data-name="accent" style="background-color: rgb(205, 220, 57);"></span>
      <span class="swatch" title="primary_text" data-color="#212121" data-name="primary_text" style="background-color: rgb(33, 33, 33);"></span>
      <span class="swatch" title="secondary_text" data-color="#727272" data-name="secondary_text" style="background-color: rgb(114, 114, 114);"></span>
      <span class="swatch" title="divider" data-color="#B6B6B6" data-name="divider" style="background-color: rgb(182, 182, 182);"></span>
</div>

CSS

.swatch.clear {
  background-color: #fff;
}
.currentSelectedColor {
  display: inline-block;
  width: 50px;
  height: 50px;
  outline: 1px solid #bbb;
  border: 2px solid #fff;
}
.swatch {
  position: relative;
  display: inline-block;
  font: 0/0 a;
  width: 12.66%;
  padding-top: 11.00%;
  margin: 1% 2%;
  outline: 1px solid #bbb;
  border: 2px solid #fff;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
}

.active::after {
  content: "X";
  position: absolute;
  color: blue;
  font-size: 25px;
  left: 50%;
  top: 50%;
}

JavaScript

$(document).ready(function () {
		console.log("ready")
    var div = document.querySelectorAll('span.swatch');
    // On set la couleur par défaut
		var currentColorName = $("#color-name").val() || "white";
    var currentColorValue = $("#color-value").val() || "#ffffff";
    var displaySelectedColor = $("div.currentSelectedColor");
    var currentSelectedColor = $("span.swatch.active");
    
    // On applique la couleur par défaut sur les sélecteurs
    $("#color-name").val(currentColorName);
    $("#color-value").val(currentColorValue);
    displaySelectedColor.css("background-color",currentColorValue);
    
    
    for (var i = 0; i < div.length; i ++ )
    {
        div[i].addEventListener('click', function (event) {
        
        	// On enlève la classe active sur l'ancienne couleur sélectionnée
          currentSelectedColor.removeClass("active");
          
          // On assigne les nouvelles infos
					currentColorValue = $(event.target).data("color");
          currentColorName = $(event.target).data("name");
          
          // On les affiches
          $("#color-name").val(currentColorName);
    			$("#color-value").val(currentColorValue);
          displaySelectedColor.css("background-color",currentColorValue);
          
          currentSelectedColor = $(event.target);
    		
          // On ajoute la classe active sur la nouvelle couleur sélectionnée
          currentSelectedColor.addClass("active");
        })
    }
});