JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<nav class="top">
  <div id="accounts" class="bag">

  </div>
  <div id="kpis" class="bag">

  </div>
  <div>
  <input type="date" id="begin" name="von">-<input id="end" type="date" name="bis">
  </div>
</nav>
<nav class="left">
  <input name="suche"><br>
  <small>ACCOUNTS</small>
  <ul class="accountsavailable">
    <li data-id="0" data-network="facebook" class="facebook">ABC Wissen
      <button></button>
    </li>
    <li data-id="1" data-network="twitter" class="twitter">ABC Wissen
      <button></button>
    </li>
    <li data-id="2" data-network="facebook" class="facebook">ABC Aktuell
      <button></button>
    </li>
    <li data-id="3" data-network="youtube" class="youtube">ABC3
      <button></button>
    </li>
    <li data-id="4" data-network="instagram" class="instagram">ABCDING
      <button></button>
    </li>
  </ul>
  
  <small>GRUPPEN</small><br>
  
  <small>TAGS</small>
  <hr>
  <div>
    FB YT TW IN
  </div>
  <ul class="kpisavailable">
    <li data-id="facebookfans" data-network="facebook" class="facebook">Fans
      <button></button>
    </li>
    <li data-id="facebookengaged" data-network="facebook" class="facebook">Aktive Nutzer
      <button></button>
    </li>
    <li data-id="youtubeviews" data-network="youtube" class="youtube">Views
      <button></button>
    </li>
    <li data-id="twitterfollower" data-network="twitter" class="twitter">Follower
      <button></button>
    </li>
  </ul>
</nav>
<section>
  <button id="calc">
    CALC
  </button>
  <pre>

  </pre>
  <div class="chartbox">

  </div>
</section>

CSS

body {
  font-family: sans-serif;
}

nav.top {
  width: 100%;
  height: 100px;
  background: gold;
  float: left;
}

nav.left {
  width: 252px;
  height: 100vh;
  background: gold;
  float: left;
}

.chartbox {
  width: 300px;
  min-height: 200px;
  border: 1px solid blue;
  background: linear-gradient(cornflowerblue, beige);
  float: left;
}

.bag {
  border: 2px dashed rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.6);
  display: block;
  min-height: 40px;
  width: 34%;
  float: left;
  margin: 8px;
  font-size: 9pt;
  border-radius: 3px;
}

li button:before {
  content: "+";
}

ul li button {
  float: right;
}

li.added button:before {
  content: "-";
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  margin: 3px;
  padding: 2px;
  border-radius: 2px;
}

.bag li {
  display: inline;
}

li.facebook {
  background: rgb(59, 89, 152);
  color: white;
}

li.youtube {
  background: tomato;
}

li.twitter {
  background: cyan;
}

li.instagram {
  background: chocolate;
  color: white;
}

JavaScript

var cb = $(".chartbox").remove(); //first();

$("ysection").append(cb.clone());
$("ysection").append(cb.clone());
$("ysection").append(cb.clone());

$(".accountsavailable").on("click", "li:not(.added) button", function() {
  $("#accounts").append($(this).parent().clone().addClass("added"));
  $(this).parent().addClass("added");
});


$("#accounts,.accountsavailable").on("click", "li.added button", function() {
  $("#accounts").find("li[data-id='" + $(this).parent().data("id") + "']").remove();
  $(".accountsavailable").find("li[data-id='" + $(this).parent().data("id") + "']").removeClass("added");
});

$(".kpisavailable").on("click", "li:not(.added) button", function() {
  $("#kpis").append($(this).parent().clone().addClass("added"));
  $(this).parent().addClass("added");
});


$("#kpis,.kpisavailable").on("click", "li.added button", function() {
  $("#kpis").find("li[data-id='" + $(this).parent().data("id") + "']").remove();

  $(".kpisavailable").find("li[data-id='" + $(this).parent().data("id") + "']").removeClass("added");
});



function getAnalysisConf(a, m) {
  var networks = {};

  a.children().each( function() {
    var el = $(this);
    (typeof networks[el.data("network")] === "undefined") ? (networks[el.data("network")] = {
      accounts: [el.text().trim()],
      kpis: []
    }) : (networks[el.data("network")]["accounts"].push(el.text().trim()))
  });

  m.children().each( function() {
    var el = $(this);
    (typeof networks[el.data("network")] === "undefined") ? (networks[el.data("network")] = {
      accounts: [],
      kpis: [el.data("id")]
    }) : (networks[el.data("network")]["kpis"].push(el.data("id")))
  });



  return networks;
}

$("#calc").click(function() {
	var kombi = getAnalysisConf($("#accounts"), $("#kpis"));
  $("pre").text(JSON.stringify(kombi, " ", " "));
  
  var r="";
  
  for (var n in kombi) {
  		for (var i=0; i < kombi[n].kpis.length; i++) {
      	 r+=n+": "+kombi[n].kpis[i]+" * "+kombi[n].accounts.join(",")+"\n";
     ...