JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6 mb-sm-3">
  <div style="background: #dedede; height: 40px; width: 40px; border-radius: 50%; margin-bottom: -10px;"></div>
  <div class="cake-floor mb-2" data-floor="3">3</div>
  <div class="cake-floor mb-2" data-floor="2">2</div>
  <div class="cake-floor" data-floor="1">1</div>
</div>

<div class="col-md-6 tastes">
  <div class="cake-taste text-center" data-taste="chocolate">chocolate</div>
  <div class="cake-taste text-center" data-taste="caramel">caramel</div>
  <div class="cake-taste text-center" data-taste="banana">banana</div>
  <div class="cake-taste text-center" data-taste="lime">lime</div>
  <div class="cake-taste text-center" data-taste="blueberry">blueberry</div>
  <div class="cake-taste text-center" data-taste="rapsberry">rapsberry</div>
  <div class="cake-taste text-center" data-taste="strawberry">strawberry</div>
</div>

JavaScript

$(".cake-floor").click(function(){
  var floor = $(this);
  console.log(floor);
  $(".cake-taste").off().click(function(){
    var taste = $(this).text();
    $(floor).text(taste);
  });
});