JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="abc">
	<table id="tabelaIE" width='400' border='0'>
		<tr>
		  <td class="nome" width='164'>Nome</td>
		  <td class="dias" width='36' align='right'>2</td>
		  <td class="valor" width='53' align='right'>60.00</td>
		  <td class="total" width='119' align='right'>120.00 <input type="text" name="opcoe[]" value="" style="width: 50px"></td>
      <td class="valores"> 
      <input type="text" class="split1" value="">
      <input type="text" class="split2" value="">
      <input type="text" class="split3" value="">
      <input type="text" class="split4" value="">
      <input type="text" class="split5" value="">
      <input type="text" class="split6" value="">
      <input type="text" class="split7" value="">
      <input type="text" class="split8" value=""></td>
		</tr>
     
	</table>

	<input type="text" name="somaTabelaIE" id="somaTabelaIE" value="">
</div>


<fieldset class="scheduler-border">
	<legend class="scheduler-border">Impostos/Encargos</legend>
	
	<div id="D1">1. 
		<input name="opcoes[]" class="c obrigatorio" type="checkbox" value="1|Texto 1|+|15.00|FIX|%|POR|VLT|1" alt="+ 0.15 FIX %" title="Texto 1"> <b> Texto 1 </b>
		<input type="text" value="" class="i"> 
	</div>

	<div id="D2">2. 
		<input name="opcoes[]" class="c " type="checkbox" value="2|Texto 2|+|5.00|DIA||MON|DIA" alt="+ 5.00 DIA " title="Texto 2"> Texto 2
		<input type="text" value="" class="i">
	</div>
		
	<div id="D3">3. 
		<input name="opcoes[]" class="c " type="checkbox" value="3|Texto 3|+|30.00|FIX||MON|VLT" alt="+ 30.00 FIX " title="Texto 3"> Texto 3
		<input type="text" value="" class="i">
	</div>
		
	<div id="D4">4. 
		<input name="opcoes[]" class="c " type="checkbox" value="3|Texto 4|+|35,00|FIX||MON|VLT" alt="+ 35,00 FIX " title="Texto 4"> Texto 4
		<input type="text" value="" class="i">
	</div>
</fieldset>

JavaScript

$(".c").click(function(){
  			var values = $(this).val().split('|');
        //define se esta marcado ou não
        if($(this).prop('checked')){

           var quantity = $("table[id^=tabelaIE]").length;

           //adiciona o valor para identificar na hora de remover
           $(this).data( 'qty', quantity );

           // Clone the main table
           var table = $("#tabelaIE").clone(true)
           // Change its ID to the current ID plus the quantity variable
           .attr( 'id', function() { return this.id + quantity; })
           // find any text or file inputs
           .find( ':text,:file' )
           // change their IDs
           .attr( 'id', function() { return this.id + quantity; })
           // set the input values to ""
           .val( "" )
           // return to the cloned table
           .end();
           //adiciona valores
           table.find('.nome').text(values[1]);
           table.find('.dias').text(values[2]);
           table.find('.valor').text(values[3]);
           table.find('.total').text((values[0]) * (values[3]));
           
           values.forEach(function(valor, index){
           	table.find('[class="split'+(index+1)+'"]').val(valor)
           });
           
           
           // append wherever you want it.
           // As the comment below your question states,
           //   this is not a valid placement
           table.appendTo('#abc');
           var oldVal = $('#somaTabelaIE').val();
           $('#somaTabelaIE').val(eval(oldVal||0) + eval(values[3]))
        }else{
           var oldVal = $('#somaTabelaIE').val();
           $('#somaTabelaIE').val(oldVal - eval(values[3]))
           //remove a table que pertence ao checkbox
           $("table#tabelaIE"+$(this).data('qty')).remove()
        }
    });