JSFiddle - React, Tailwind, and code Playground

by Luiz Silva

HTML

<div class="dataImposto">
  <div class="row static-info align-reverse">
    <div class="col-md-8 name "> DAS(11.50 % )
    </div>
    <div id="imposto" class="col-md-3 value DAS" data-class="DAS" data-imposto="11.50"> </div>
  </div>
<!--  <div class="row static-info align-reverse">
    <div class="col-md-8 name ">Imposto de Renda (15.00%)</div>
    <div id="imposto" class="col-md-3 value ImpostodeRenda" data-class="ImpostodeRenda" data-imposto="15.00">
      </div>
  </div> -->
</div>
<button id="add">Add</button>
<button id="calc">Calc</button>

CSS

div[data\-class="ImpostodeRenda"] {
  color: red;
}

JavaScript

$('#add').click(function() {
	var dados = $.parseJSON('{"item 1":{"nome":"ImpostodeRenda","valor":10}}');
	$.each(dados,function (key) {
      $(".dataImposto").append(" <div class='row static-info align-reverse'> "+
      	"<div class='col-md-8 name'>"+dados[key].nome+" ("+dados[key].valor+"%)</div> " +
        "<div id='imposto' class='col-md-3 value "+dados[key].nome.replace( /\s/g, '' ) + 
        " ' data-class="+dados[key].nome.replace( /\s/g, '' )+
        " data-imposto="+dados[key].valor+" > </div> </div>");
	});
});

$('#calc').click(function() {
  $(".ImpostodeRenda").text("boo")
});