JSFiddle - React, Tailwind, and code Playground

by Davi Amorim

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
 <div class="aqui">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios1" value="option1" onclick="fabricanteExportador()">
      <label class="form-check-label" style="margin-left: 30px;" for="exampleRadios1"> O Exportador é o Fabricante</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
      <label class="form-check-label" style="margin-left: 30px;" for="exampleRadios2">O Fabricante é Desconhecido </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3">
        <label class="form-check-label" style="margin-left: 30px;" for="exampleRadios3">Todos/Alguns Itens tem Fabricantes diferente do Exportador</label>
    </div>
</div>  
<div id="other2" class="other2" style="display:none;">
		<div class="form-check">
			<input class="form-check-input" type="radio" name="janedoe" id="janedoe" onchange="onefactory()">
      <label class="form-check-label" style="margin-left: 30px;" for="exampleRadios2">TODOS SÃO DO MESMO FABRICANTE</label>
    </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="otherfactory" id="otherfactory">
    <label class="form-check-label" style="margin-left: 30px;" for="exampleRadios3">OS ITENS TEM FABRICANTES DISTINTOS</label>
  </div>
</div>

JavaScript

document.getElementById("exampleRadios1").addEventListener("click", fabricanteExportador);
/*    campo fabricantes        */
function fabricanteExportador()
{ 

// variavel que contém 
fabricante = `
                <div class="form-group input-group input-group-sm mb-1">
                        <span class="tituloform">Empresa:</span><input id="empresa4" name="empresa4" type="text"  class="form-control " required/>
                    </div>

                    <div class="form-group input-group input-group-sm mb-1">
                        <span class="tituloform">CNPJ:</span><input id="cnpj4" name="cnpj4" type="text" class="form-control" required/>
                    </div>


                    <div class="form-group input-group input-group-sm mb-1">
                        <span class="tituloform">CEP:</span><input id="cep4" name="cep4" type="text" class="form-control" required />
                        <span class="tituloform">Endereço:</span><input id="endereco4" name="endereco4" type="text" class="form-control" required />
                    </div>

                    <div class="form-group input-group input-group-sm mb-1">
                        <span class="tituloform">Número:</span><input id="numero4" name="numero4" type="text" class="form-control" required />
                        <span class="tituloform">Bairro:</span><input id="bairro4" name="bairro4" type="text" class="form-control " />
                        <span class="tituloform">Complemento:</span><input id="complemento4" name="complemento4" type="text" class="form-control " />
                    </div>

                    <div class="form-group input-group input-group-sm mb-1">
                        <span class="tituloform">Cidade:</span><input id="cidade4" name="cidade4" type="text" class="form-control" required onKeyUp="carregaCidadeAutocompleteRomaneio(this, 'cod_cidade_shi','estado_shi','pais_shi');"/>
                        <input id="cod_cidade_shi" name="cod_cidade_shi"...