JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="padding:20px; display: block;">
  <div id="temperature_bar">
  </div>
</div>
<div style="padding:20px; display: block;">
  <label>Speed</label>
  <button id="decSpeed" title="Decrease">-</button>
  <button id="incSpeed" title="Increase">+</button>
</div>

CSS

.item {
  border-style: solid;
  border-width: 1px 1px 1px 0;
  border-color: #ccc;
  padding: .25em .5em;
  cursor: pointer;
}

.item:nth-child(1) {
  border-left-width: 1px;
}

.row-thumbnail .caption {
  width: 100%;
  text-align: center;
}

JavaScript

function showToolTips(obj) {
  if (obj.hasClass("on")) {
    // Hide ToolTip
    obj.removeClass("on");
    obj.tooltip("close");
  } else {
    // Show ToolTip
    obj.addClass("on");
    obj.tooltip("open");
  }
}

function addItem() {
  var divCount = $(".item").length + 1;
  if (divCount == 8) {
    return false;
  }
  var img = "https://dummyimage.com/50x50/000000/fff";
  var item = $("<div>", {
      id: "speed-" + divCount,
      class: "trigger item",
      "data-tip-content": img + "|" + divCount,
      "data-tip-id": divCount,
    })
    .css("float", "left");
  item.html(divCount);
  item.tooltip({
    disabled: true,
    hide: {
      effect: "flip",
      duration: 1000
    },
    position: {
      my: "center bottom+5",
      at: "center top",
      collision: "flip"
    },
    items: "[data-tip-content]",
    content: '<div class="row row-thumbnail" id="box-search"><div class="thumbnail text-center"><img width="50" height="50" src="' + item.data("tip-content").split("|")[0] + '" class="img-responsive"><div class="caption"><span class="tooltip-text-size">' + item.data("tip-content").split("|")[1] + '</span></div></div>'
  });
  $('#temperature_bar').append(item);

}

// Make Items
function init() {
  var c = 5;
  var divCount = 1;
  for (divCount; divCount <= c; divCount++) {
    var item = $("<div>", {
        id: "speed-" + divCount,
        class: "trigger item",
        "data-tip-content": "https://dummyimage.com/50x50/000000/fff" + "|" + divCount,
        "data-tip-id": divCount,
      })
      .css("float", "left");
    item.html(divCount);
    item.tooltip({
      disabled: true,
      hide: {
        effect: "flip",
        duration: 1000
      },
      position: {
        my: "center bottom+5",
        at: "center top",
        collision: "flip"
      },
      items: "[data-tip-content]",
      content: '<div class="row row-thumbnail" id="box-search"><div class="thumbnail text-center"><img width="50" height="50" src="' +...