JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="Wrap">
</div>
<button class="AddDiv">AddDiv</button>
<button class="GreyDiv">GreyDiv</button>
<button class="RedDiv">RedDiv</button>

CSS

.Wrap {
  width: 650px;
  height: 800px;
}

.container {
  position: relative;
  top: 5px;
  left: 5px;
  width: 320px;
  height: 120px;
  background-color: red;
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  display: none;
}

.List {
  position: relative;
  top: 5px;
  left: 5px;
  width: 300px;
  height: 120px;
  background-color: rgba(200, 200, 200, 1);
  float: left;
  margin-left: 5px;
  margin-top: 5px;
}

.AddDiv {
  position: absolute;
  top: 0px;
}

.GreyDiv {
  position: absolute;
  top: 0px;
  left: 170px;
}

.RedDiv {
  position: absolute;
  top: 0px;
  left: 250px;
}

.count {
  position: absolute;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 250px;
  top: 50%;
  margin-top: -15px;
  background-color: white;
  text-align: center;
  cursor: pointer;
}

.countSecond {
  position: absolute;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 150px;
  top: 50%;
  margin-top: -15px;
  background-color: white;
  text-align: center;
  cursor: pointer;
}

.countThird {
  position: absolute;
  width: 30px;
  height: 30px;
  position: relative;
  left: 50px;
  top: 50%;
  margin-top: -15px;
  background-color: white;
  text-align: center;
  cursor: pointer;
}

JavaScript

function CounterObj() {
	// Current object instance
  var currentObj = this;
  this.currentInstance = objectsNumber
  this.firstCounter = 0;
  this.secondCounter = 0;
  this.thirdCounter = 0;

  // Our html object
  this.objCreation = function() {
    var $list = $('<div>', {
      class: 'List',
    	// New object will have same color as the rest
      style: 'background-color:' + currentColor + ';'
    }).append(
      $('<div>', {
        class: 'count',
        id: 'div_' + this.currentInstance,
        text: this.firstCounter
      })).append(
      $('<div>', {
        class: 'countSecond',
        id: 'divSecond_' + this.currentInstance,
        text: this.secondCounter
      })).append(
      $('<div>', {
        class: 'countThird',
        id: 'divThird_' + this.currentInstance,
        text: this.thirdCounter
      }));

    // Add new counter List(I have no idea how to call it).
    $('.Wrap').prepend($list);

    // Increment objects counter
    objectsNumber++;
  };

  // Invoke method from above on every new CounterObj creation
  this.objCreation();

  // Increment specific counter when specific "button" is clicked
  this.firstButton = $('#div_' + this.currentInstance);
  this.firstButton.on('click', function() {
    $(this).html(++currentObj.firstCounter);
  });

  this.secondButton = $('#divSecond_' + this.currentInstance);
  this.secondButton.on('click', function() {
    $(this).html(++currentObj.secondCounter);
  });

  this.thirdButton = $('#divThird_' + this.currentInstance);
  this.thirdButton.on('click', function() {
    $(this).html(++currentObj.thirdCounter);
  });
};

var objectsNumber = 0;
var currentColor = 'rgba(200, 200, 200, 1)';

// Start with one "List" already in place
new CounterObj();

// Add new "List" and change color events
$('.AddDiv').on('click', function() {
  new CounterObj();
});
$('.GreyDiv').on('click', function() {
  currentColor = 'rgba(200, 200, 200, 1)';
  $('.List').css('background-color',...