JSFiddle - React, Tailwind, and code Playground

by Zhelyakea

HTML

<div id="div" class="p div">
<p id="1" class="p">100</p>
<p id="2" class="p second">200</p>
<p id="3" class="p">300</p>
 </div>
<input class="result" placeholder="итого" disabled></input>

CSS

p, input{
    -webkit-user-select:none;
    background-color:white;
    color:#EF5350;
}
.wrap{
    color:red;
}
.fontWeight{
    font-weight:bold;
}
.blue{
    background-color:#009688;
}
p, input{
    border:1px solid #EF5350;
    text-align:center;
    width:250px;
    height:50px;
    line-height:50px;
    cursor:pointer;
}
.red{
    background-color:#EF5350;
    color:white;
}

JavaScript

var uls = document.getElementsByTagName('p');
var lis = document.querySelectorAll('p');
var list = document.querySelector('p.second');
document.querySelector('p.second').classList.add('wrap');

for(i=0;i<lis.length;i++){
  lis[i].classList.toggle('fontWeight');
};
var next = document.querySelector('p.second').nextElementSibling;
var prev = document.querySelector('p.second').previousElementSibling;

var p4 = document.createElement('p');
p4.id = '4';
p4.className = 'p';
div.appendChild(p4);
p4.innerHTML = '400';


var p5 = document.createElement('p');
p5.id = '5';
document
  .querySelector('div.div')
  .appendChild(p5);
p5.className = 'p';
p5.innerHTML = '500';

var divFirstChild = document.querySelector('div.div').children[0];
var p0 = document.createElement('p');
p0.id = '0';
p0.className = 'p';
document
	.querySelector('div.div')
    .insertBefore(p0, divFirstChild);
p0.innerHTML = '0';

//clone node, remove, replace

var p6 = divFirstChild.cloneNode(true);
  p6.innerHTML = '600';

var pLength = document.querySelectorAll('p.p').length;
var lastP = document.querySelectorAll('p.p')[pLength-1];

p6.addEventListener("click", modifyText, false);


//document.querySelector('div.div').removeChild(p5)
//document.querySelector('div.div').appendChild(p6);
//document.querySelector('div.div').replaceChild(p6, p5)

var lis2 = document.querySelectorAll('p.p');
for(i=0;i<lis2.length;i++){
  lis2[i].addEventListener("click", modifyText1, false);
};

function modifyText1() {
	this.classList.toggle('red');
    var summ = [];
    var itogo =0;
    var selected = document.querySelectorAll('p.red');
    for(i=0;i<selected.length;i++){
      var cost = selected[i].innerHTML;
      summ.push(parseInt(cost));
      itogo += parseInt(selected[i].innerHTML);
    };
    document.querySelector('.result').value = itogo;
}

function modifyText() {
	this.classList.toggle('blue');
}
document.querySelector('div.div').replaceChild(p6,...