JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ibox-content">
                        <form id="form" name="form" onkeydown="EnterKeyFilter();" class="form-horizontal" method="POST" enctype="multipart/form-data" action="pagarg.php">
                            <div>
                                <center>
                                    <button class="btn btn-sm btn-primary " type="submit"><strong>Salvar</strong></button>
                                    <button class="btn btn-sm btn-warning " type="button" onClick="history.go(-1)"><strong>Retornar</strong></button>
                                </center>
                            </div>

                            <br>
      
            <button type="button" class="btn btn-secondary btn-sm btn-block" data-toggle="collapse" data-target="#COMPRADORs"><i
                                                    class="fa fa-sign-out"></i> COMPRADOR(ES)
                        </button>
                        <div class="form-group">
                         <div id="COMPRADORs" class="collapse">
        
                                
                                 <div class="form-group">
                                     
                                      <div class="form-group">
                                 <label class="col-md-2 control-label" for="textinput">QUANTIDADE</label>
                                    <div class="col-md-1">
                                        <input id="envolvidoCOMPRADOR" name="envolvidoCOMPRADOR" type="text" value="" placeholder="" class="form-control" maxlength = "1">
                                
                                </div>
                                </div>

                           

                            
                                <p id="demoenvolCOMPRADOR"></p>
                               
          
   
      

  </div>
                         
                     
                                </div>
                                
        ...

JavaScript

$(document).ready(function() {
    $('#form input').keyup(function() {
        
        if($('#envolvidoCOMPRADOR').val() == "2")  {

 document.getElementById("demoenvolCOMPRADOR").innerHTML = '<div class="form-group"><input type="hidden" id="envolvido1tipo" \ name="envolvido1tipo" value="COMPRADOR"> \
 <label class="col-md-2 control-label" for="textinput">NOME COMPLETO</label> \
 <div class="col-md-4"> \
<input id="envolvido1nome" name="envolvido1nome" type="text" value="" placeholder="" class="form-control" maxlength = "100"> \
</div> \
<label class="col-md-1 control-label" for ="textinput">SEXO</label> \
<div class="col-md-1"> \
<input id="envolvido1sexo" name="envolvido1sexo" type="text" value="" placeholder="" class="form-control" maxlength = "1"> \
</div>   \
<label class="col-md-1 control-label" for                                         ="textinput">IDENTIDADE</label> \
<div class="col-md-2"> \
<input id="envolvido1idt" name="envolvido1idt" type="text" value="" placeholder="" class="form-control" maxlength = "30"> \
</div> </div> \
<div class="form-group"> \
<label class="col-md-2 control-label" for="textinput">NASCIMENTO</label> \
<div class="col-md-3"> \
<input id="envolvido1nasc" name="envolvido1nasc" type="date" value="" placeholder="" class="form-control" maxlength = "30"> \
</div> \
<label class="col-md-1 control-label" for                                         ="textinput">IDADE</label> \
<div class="col-md-1"> \
<input id="envolvido1idade" name="envolvido1idade" type="num" value="" placeholder="" class="form-control" maxlength = "3" readonly=""> \
</div>  \
<label class="col-md-2 control-label" for="textinput">SITUAÇÃO</label> \
<div class="col-md-2"> \
<select id="envolvido1situa" name="envolvido1situa"  class="form-control" maxlength = "50" style="width:150px"> \
<option value=" "> </option> \
<option value="A">A</option> \
<option value="B">B</option> \
<option value="C">C</option> \
</select> </div> </div> </div> <hr> \
<div...