Create dynamic form in javascript

Question

I am trying the form dynamically in javascript. For this I created the form first:

<form class="text-center border border-light largura" action="#!" id="retorno">

</form>

Then I have the database query script:

if(isset($_POST["emp_aman1"]))  
 {      
$query = "SELECT Tratamento, DataTermino, B.nome AS Colaborador, raddb.Status.Estado

FROM  raddb.RequesicaoManutencao AS A LEFT OUTER JOIN raddb.TratamentoManutencao

ON raddb.TratamentoManutencao.IdReq = A.Id LEFT OUTER JOIN raddb.Status

ON raddb.Status.Id = TratamentoManutencao.Estado LEFT OUTER JOIN raddb.usuarios AS B

ON B.id = TratamentoManutencao.Colaborador1

WHERE A.Id = '".$_POST["emp_aman1"]."' Order By DataTermino ASC"; 

      $result = mysqli_query($conn, $query);
      $array = array();
      while($row = mysqli_fetch_array($result))  
        { 
            $array[] = $row;

        }
      echo json_encode($array);  
 } 

Then I have the js that builds dynamic html:

 $(document).on('click', '.vie_aman1', function(){  
       var emp_aman1 = $(this).attr("data-tmanu1");

       $.ajax({  
            url:"./consaman1",  
            method:"POST",
            cache: false,               
            data:{emp_aman1:emp_aman1},             
            dataType:"json",  
            success:function(data){
                var linha = ``;
                for (var i = 0; i < data.length; i++) { 
                   
                   Tratamento = data[i][0];
                   DataTermino = data[i][1];
                   Colaborador = data[i][2];
                   Estado = data[i][3];
                   
                   linha += `<div class="row" style="margin-bottom:2%;">                        
                    <div class="col-md-12 col-xs-12">
                    <div class="form-group1">
                        <textarea rows="3" readonly="true">Tratamento</textarea>
                        <label class="control-label2"><FONT COLOR="#337ab7">Tratamento</FONT></label><i class="bar1"></i>
                    </div>
                    </div>
                    </div>
                    <div class="row" style="margin-bottom:2%;">
                    <div class="col-md-4 col-xs-4">
                        <div class="form-group1">
                            <input type="text" value="DataTermino" readonly="true">
                            <label class="control-label2"><FONT COLOR="#337ab7">Data Término</FONT></label><i class="bar1"></i>
                        </div>
                    </div>
                    `; 
                    }
                    $("#retorno").html(linha);

                }
        
       });
  
  });

Build html, but with the name of the variables and not with the data that returns from the database

Answer 1

So that the string template replace the value of the variables you need to put between ${ } otherwise it will be treated as a literal text.

You need to do it that way for example:

<label class="control-label2"><FONT COLOR="#337ab7">${Tratamento}</FONT></label><i class="bar1"></i>