JSFiddle - React, Tailwind, and code Playground

by Davi Amorim

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- div do 4 conteudo -->
                <div class="conteudo4">
                    <!-- botão que adiciona cabeçário de caixa/container   -->
                    <span id="botao1" class="fa fa-plus" style="margin-right: 15px;"aria-hidden="true" onclick="InsereMercadoria();">Adicionar Volume</span>
                        <div id="tabelas">

                        </div>
                   
                        <span id="botao5" class="fa fa-plus"  onclick="InsereMercadoria();">Adicionar Volume</span>                    
                </div>                                      
                <!-- end div class="conteudo4" -->

CSS

/*  ///////////  tabela  /////////////////////////  border: 1px solid #000;    */
.tr {
    vertical-align: top;
    height: 20px;
}
.linha input #pack, #NCM {
    width: 20px;
}
#opt {
    width: 18px;
}
.linha input{

    padding: 0px;
    width: 50px;
    height: 30px;
    border: 0px;
    border-spacing: 0px;
}
td.linha{
    
    vertical-align: top;
    padding: 0px;
    margin: 0px;
}

.triple-input  {
    width: 200px;
    margin: 0px;   
    padding: 0px;
}
tbody {
    vertical-align: top;
    margin-top: 0px;
    width: 740px;
    border-spacing: 0px;
    height: 30px;
}

JavaScript

function InsereMercadoria()
{
        $("#botao1").remove();
        $('#botao5').css("display", "block");
	codigo1 = `</br>
                    <div class="table-responsive">
                        <table  id="grid_mercadorias_xGjU2k"  >
                            <tbody id="tbody">            
                                <tr class="linha">
                                    <td>#Numeração<input id="number_b_xGjU2k" name="number_b_xGjU2k" type="text"  /></td>
                                    <td colspan="3">Tipo Embalagem
                                        <select name="pack_type_b_xGjU2k" id="pack_type_b_xGjU2k" class="custom-select" >
                                            <option selected></option>   
                                                    <option value="aereo">Aéreo</option>
                                                    <option value="truck">Truck</option>
                                                    <option value="navio">FCL</option>
                                                    <option value="navio">LCL</option>
                                        </select><br/>
                                    </td>
                                    <td>Peso da Embalagem<input id="pack_weight_b_xGjU2k" name="pack_weight_b_xGjU2k" type="text"  /></td>
                                    <td>Quantidade<input id="quantidade_b_xGjU2k" name="quantidade_b_xGjU2k" type="text"  /></td>
                                    <td colspan="2">Container<input id="container_b_xGjU2k" name="container_b_xGjU2k"  type="text"  /></td>
                                    <td colspan="3" class="triple-input">                                 
                                        Dimensão </br>
                                        C <input id="length_b_xGjU2k" name="length_b_xGjU2k" type="text"/>
                                        L <input id="width_b_xGjU2k" name="width_b_xGjU2k" type="text"/>                               ...