JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Lane Color</h2>
<div class="lane-colors">
    <span class="green"></span><span class="purple"></span><span class="blue"></span>		</div>
<h2>Alternate Lane Colors</h2>
<div class="alt-lane-colors">
    <span class="green"></span><span class="purple"></span><span class="blue"></span>		</div>
<svg>
    <circle class="ground" cx="50" cy="50" r="40" fill="#adcc8e" />
    <circle class="sky" cx="50" cy="50" r="20" fill="white" />
</svg>

CSS

.green {
  background-color: #adcc8e;
  height: 24px;
  width: 24px;
  display: inline-block;
  margin-right: 4px;
  cursor: pointer;
}
.purple {
  background-color: #9119a9;
  height: 24px;
  width: 24px;
  display: inline-block;
  margin-right: 4px;
  cursor: pointer;
}
.blue {
  background-color: #99caee;
  height: 24px;
  width: 24px;
  display: inline-block;
  margin-right: 4px;
  cursor: pointer;
}

JavaScript

console.clear();
(function($) {
  var LaneWizard = {
    laneData: {},
    targets: {
      Lane: $('.lane-colors span'),
      AltLane: $('.alt-lane-colors span')
    },
    laneSVG: $('.ground'),
    altLaneSVG: $('.sky'),
    prepTargets: function() {
      for(var t in LaneWizard.targets) {
        LaneWizard.targets[t].on('click', function() {
          LaneWizard['change'+t+'Color']($(this));
        });
      }
    },
    changeLaneColor: function(e) {
      LaneWizard.laneSVG.css('fill', e.css('background-color'));
      LaneWizard.laneData.laneColor = e.css('background-color');
    },
    changeAltLaneColor: function(e) {
      LaneWizard.altLaneSVG.css('fill', e.css('background-color'));
      LaneWizard.laneData.altLaneColor = e.css('background-color');
    },
    init: function() {
      LaneWizard.prepTargets();
    }
  };

  $(document).ready(function() {
    LaneWizard.init();
  });
})(jQuery);