Javascript concatenation with PHP

Question

$(document).ready(function() {
  var max_fields1      = 6;  
  var wrapper1         = $("#container1");
  var add_button1      = $("#add_tipo_telha");

  var x = 0;

  $(add_button1).click(function(e){
      e.preventDefault();
      if(x < max_fields1){

          $(wrapper1).append(
            '<div id="tipo_telha_div_'+ x +'" class="input-group margin">'+
            '<div id="tipo_telha_nome'+ x +'"></div>'+
              '<div class="input-group-btn">'+
                '<button type="button" class="btn btn-danger" id="delete" href="#">Remover</button>'+
              '</div>'+
              '&emsp;<select name="cob_tipoTelha'+ x +'" id="cob_tipoTelha'+ x +'" style = "margin-bottom: 10px; margin-left: 25px" required font-size: 18px onchange="exibir_ocultar_telha(this, '+ x +')">'+
                      '<option value="">Selecione</option>'+
                      '<option value="1"'+'<?=($dados_ficha_tecnica["cob_tipoTermoAcu"] == "Sim") ? "selected=selected" : "";?>'+'>Telha Termoacústica</option>'+
                      '<option value="2"'+'<?=($dados_ficha_tecnica["cob_tipoCeram"] == "Sim") ? "selected=selected" : "";?>'+'>Telha Cerâmica</option>'+
                      '<option value="3"'+'<?=($dados_ficha_tecnica["cob_tipoFibrocAmiant"] == "Sim") ? "selected=selected" : "";?>'+'>Telha de Fibrocimento (com amianto)</option>'+
                      '<option value="4"'+'<?=($dados_ficha_tecnica["cob_tipoFibroc"] == "Sim") ? "selected=selected" : "";?>'+'>Telha de Fibrocimento (sem amianto)</option>'+
                      '<option value="5"'+'<?=($dados_ficha_tecnica["cob_tipoZinco"] == "Sim") ? "selected=selected" : "";?>'+'>Telha de Zinco</option>'+
                      '<option value="6"'+'<?=($dados_ficha_tecnica["cob_tipoOutros"] == "Sim") ? "selected=selected" : "";?>'+'>Outros</option>'+
                  '</select>'+
                  '<div id="telha_outros'+ x +'" style=" display: none; margin-bottom: 10px; margin-left: 25px "><input id="outros_telha'+ x +'" type="text"  placeholder="Especifique" name= "telha_outros'+ x +'"/></div>'+
                  // '<input type="text" style= "margin-left: 25px" name= "cob_tipoTelha_qtd'+ x +'" id= "cob_tipoTelha_qtd'+  +'" placeholder="Quantidade" required/> m<sup>2</sup>'+
                  <?php
                  $x = 0;

                     if($dados_ficha_tecnica["cob_tipoTermoAcu"] == "Sim"){
                       echo('<input type="text" style= "margin-left: 25px" name= "cob_tipoTelha_qtd'.$x.'" id= "cob_tipoTelha_qtd'.$x.'" value="'.$dados_ficha_tecnica["cob_tipoTermoAcuQtd"].'" placeholder="Quantidade" required/> m<sup>2</sup>');
                     }
                     elseif($dados_ficha_tecnica["cob_tipoCeram"] == "Sim"){
                       echo('<input type="text" style= "margin-left: 25px" name= "cob_tipoTelha_qtd'.$x.'" id= "cob_tipoTelha_qtd'.$x.'" value="'.$dados_ficha_tecnica["cob_tipoCeramQtd"].'" placeholder="Quantidade" required/> m<sup>2</sup>');
                     }
                     elseif($dados_ficha_tecnica["cob_tipoFibrocAmiant"] == "Sim"){
                       echo('<input type="text" style= "margin-left: 25px" name= "cob_tipoTelha_qtd'.$x.'" id= "cob_tipoTelha_qtd'.$x.'" value="'.$dados_ficha_tecnica["cob_tipoFibrocAmiantQtd"].'" placeholder="Quantidade" required/> m<sup>2</sup>');
                     }
                     elseif($dados_ficha_tecnica["cob_tipoFibroc"] == "Sim"){
                       echo('<input type="text" style= "margin-left: 25px" name= "cob_tipoTelha_qtd'.$x.'" id= "cob_tipoTelha_qtd'.$x.'" value="'.$dados_ficha_tecnica["cob_tipoFibrocQtd"].'" placeholder="Quantidade" required/> m<sup>2</sup>');
                      }
                      elseif($dados_ficha_tecnica["cob_tipoZinco"] == "Sim"){
                        echo('<input type="text" style= "margin-left: 25px" name= "cob_tipoTelha_qtd'.$x.'" id= "cob_tipoTelha_qtd'.$x.'" value="'.$dados_ficha_tecnica["cob_tipoZincoQtd"].'" placeholder="Quantidade" required/> m<sup>2</sup>');
                      }
                      elseif($dados_ficha_tecnica["cob_tipoOutros"] == "Sim"){
                        echo('<input type="text" style= "margin-left: 25px" name= "cob_tipoTelha_qtd'.$x.'" id= "cob_tipoTelha_qtd'.$x.'" value="'.$dados_ficha_tecnica["cob_tipoOutrosQtd"].'" placeholder="Quantidade" required/> m<sup>2</sup>');
                      }
                      else{
                        echo('<input type="text" style="margin-left: 25px" name= "cob_tipoTelha_qtd'.$x.'" id= "cob_tipoTelha_qtd'.$x.'" placeholder="Quantidade" required /> m<sup>2</sup>');
                    }
                    $x++;
                  ?>

              '</div>'); //add input box
                x++;
      }
      else{alert('Número de tipo de telhas máximo atingido!');}

  });

and makes the mistake

"Uncaught Syntaxerror: Unexpected token <"

Could you help me?

Answer 1

You need to include everyone in all echo, single escaped quotes, which will be the continuation of the Javascript concatenation, in addition to which you also need to concatenate the last line of the append ('</div>'):

In all the passages would be, like this:

echo('\'<input type="text" ... m<sup>2</sup>\'');
      ↑↑                                    ↑↑

And in the last line, add a +:

+'</div>');
↑

Answer 2

In this part of your code

<?php
    $x = 0;

    if($dados_ficha_tecnica["cob_tipoTermoAcu"] == "Sim"){
      echo('<input type="text" style= "margin-left: 25px" name= "cob_tipoTelha_qtd'.$x.'" id= "cob_tipoTelha_qtd'.$x.'" value="'.$dados_ficha_tecnica["cob_tipoTermoAcuQtd"].'" placeholder="Quantidade" required/> m<sup>2</sup>');
    }
     ...            
 ?>

you are printing <input type=... inside your javascript. Apparently in this part you are not concatenating and neither is string.

I think if you put ' before <?php, and after ?> place '+ should work