Position search response on inputs

Question

I’m doing a search on my BD and trying to position the results in some inputs, I can perform the search and get the data I need, but by positioning the result in my inputs they are getting tripled and not respecting the set positioning, I am using a grid bootstrap to display the result, what I did was this:

Form that triggers the search and the fields where I am positioning the result:

  <div class="row">
<div class="form-group">
  <div class="col-md-12 col-sm-12">
    <label>Agrônomo - Técnico *</label>
    <select name="Tecnico" id="Tecnico" onchange="buscaDados()" class="form-control">
      <option value="0">Agrônomos - Técnicos</option>
      <?php foreach ($ResTecnico as $Tecnico) { ?>
      <option value="<?php echo $Tecnico->IdTecnico ?>"><?php echo $Tecnico->Nome ?></option>
      <?php } ?>
    </select>
  </div>
</div>

The function:

function buscaDados(){
  var Tecnico = $('#Tecnico').val();  
  if(Tecnico){
    var url = 'buscaDados.php?IdTecnico='+Tecnico 
    $.get(url, function(dataReturn) {
      $('#cpf').html(dataReturn);  
      $('#crea').html(dataReturn); 
      $('#renasem').html(dataReturn); 
    });
  }

Research in BD

require_once "../_classes/conexao_pdo.class.php";
require_once "../_classes/crud.class.php";

// Atribui uma conexão PDO   
$pdo = Conexao::getInstance();
// Atribui uma instância da classe Crud, passando como parâmetro a conexão PDO e o nome da tabela  
$crud = Crud::getInstance($pdo, 'ubsTecnico');

$IdTecnico = $_GET['IdTecnico'];  //codigo do estado passado por parametro

// CPF
$sqlTecnico = "SELECT * FROM  `ubsTecnico` WHERE ubsTecnico.IdTecnico = ?";
$arrayParam  = array($IdTecnico);
$ResDadosTecnico = $crud->getSQLGeneric($sqlTecnico, $arrayParam, TRUE);    


foreach ($ResDadosTecnico as $DadosTecnico) { ?>

CPF *
Cpf; ?>" class="form-control required">

CREA *
Crea; ?>" class="form-control required">

RENASEM *
Renasem; ?>" class="form-control required">
}

Where the information should be:

  <div class="row">
<div class="form-group">
  <div class="col-md-4 col-sm-4" id="cpf">                    
    <!-- DADOS DO CPF !-->
  </div>
  <div class="col-md-4 col-sm-4" id="crea">
    <!-- DADOS DO CREA !-->
  </div>
  <div class="col-md-4 col-sm-4" id="renasem">
    <!-- DADOS DO RENASEM !-->                  
  </div>                  
</div>

The picture of how it’s getting:

Answer 1

The point is you’re returning a html in his ajax that already brings all the data at once, and for each .html(), you print the same, in case, 3 times.

You need to choose from the two one:

Return a result for each and run one ajax for each input

What would be something like:

 //neste caso faria um ajax para cada campo, sendo field o id de qual dado esta a buscar
 function buscaDados(field){
    var Tecnico = $('#Tecnico').val();  
    if(Tecnico){
        var url = 'buscaDados.php?campo='+field+'&IdTecnico='+Tecnico 
        $.get(url, function(dataReturn) {
            $('#'+field).html(dataReturn);  
       });
    }
 }

Or, return the html complete printing all in one div

 function buscaDados(){
    var Tecnico = $('#Tecnico').val();  
    if(Tecnico){
        var url = 'buscaDados.php?IdTecnico='+Tecnico 
        $.get(url, function(dataReturn) {
            $('.form-group#fields').html(dataReturn);  
       });
    }
 }

And his div:

 <div class="row">
    <div class="form-group" id="fields">
    </div>
 </div>

In case you have any questions ta a ringtone!