Choice of modal fields by variable value in php

Question

I have a modal that opens the customer data and I have clients Cpf and cnpj, I would like to show the data according to the value of the variable $razao_social, if this variable contains some data, then the modal shows the content of the client that has a cnpj, otherwise shows the data of the client that is Cpf, because, a client that does not have data cnpj is a client that has Cpf and vice versa. As it is a modal and it opens in a list with several clients I need to do this treatment with javascript, however, I have no affinity with language. I did the way I know with php, and soon this way the modification is present for all who appear in the list and is not the right, I want each modal have its own individual search filtering whether it is cnpj or Cpf, IE, I have to employ javascript.
Follow the example in php:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>


<!--Alinhamento de Campos-->
<input id="id_cadastro" type="hidden" class="form-contratol" name="id_cadastro">
<!--Primeira Coluna-->
<div class='row' align = left>
	<!--Alinhamento de Campos Primeira Coluna-->
	<div class='col-sm-6'>
		
		
		<?php
			$razao_social = "TESTE LTDA";
			if ($razao_social != ''){
				echo "<!--Campo Razão Social-->
				<label for='razao_social' class='control-label' >
				<br>Razão Social:<br></label>
				<div class='input-group'>
				<div class='input-group-addon'>
				<span class='glyphicon glyphicon-user' id='basic-addon-razao_social'></span>
				</div>
				<input type='text' name='razao_social' id='id_razao_social' class='form-control'                      required autofocus placeholder='Ex.: José Emanoel'><br>
				</div>
				<!--Fim Campo Razão Social--> 
				
				<!--Campo NOME_FANTASIA-->
				<label for='razao_social' class='control-label' >
				<br>Nome Fantasia:<br></label>
				<div class='input-group'>
				<div class='input-group-addon'>
				<span class='glyphicon glyphicon-user' id='basic-addon-razao_social'></span>
				</div>
				<input type='text' name='razao_social' id='id_razao_social' class='form-control' required autofocus placeholder='Ex.: José Emanoel' onkeyup='limite_nome_fantasia(this)'><br>
				<script>
				function limite_cliente(obj) {
				obj.value = obj.value.substring(0,70);
				}
				</script>
				</div>
				<!--Fim Campo NOME_FANTASIA-->
				
				<!--Campo CNPJ-->
				<label for='cnpj' class='control-label' >
				<br>CNPJ:<br></label>
				<div class='input-group col-lg-8'>
				<div class='input-group-addon'>
				<span class='glyphicon glyphicon-info-sign' id='basic-addon-cnpj'></span>
				</div>
				<input type='text' name='cnpj' id='id_cnpj' class='form-control cnpj' maxlength='30' required autofocus placeholder='Apenas Números'><br>
				</div>
				<!--Fim Campo CNPJ-->
				</div>
				</div>
				</form>";
			}else{
				echo "<!--Campo CPF-->
				<label for='cpf' class='control-label' >
				<br>CPF:<br></label>
				<div class='input-group'>
				<div class='input-group-addon'>
				<span class='glyphicon glyphicon-user' id='basic-addon-cpf'></span>
				</div>
				<input type='text' name='cpf' id='id_cpf' class='form-control'                      required autofocus placeholder='Ex.: José Emanoel'><br>
				</div>
				<!--Fim Campo CPF--> 
				
				<!--Campo NOME-->
				<label for='nome' class='control-label' >
				<br>Nome:<br></label>
				<div class='input-group'>
				<div class='input-group-addon'>
				<span class='glyphicon glyphicon-user' id='basic-addon-nome'></span>
				</div>
				<input type='text' name='nome' id='id_nome' class='form-control' required autofocus placeholder='Ex.: José Emanoel'><br>
				</div>
				<!--Fim Campo NOME-->
				</div>
				</div>
				</form>";
				
			?>

Answer 1

Good if I understand correctly it helps you...

I used this link to simulate the data coming from your php link

$( document ).ready(function() {
    
  $.ajax({
    url: "http://www.json-generator.com/api/json/get/bVeVjPcxBu?indent=2",
    context: document.body
  }).complete(function(data) {
    var dados = data.responseJSON;
     dados.forEach(function(dado, index) {
      var tr = document.createElement("tr");
      var td = document.createElement("td");
      if(dado.razaoSocial != ""){
        td.appendChild(document.createTextNode(dado.razaoSocial));
      } else { 
        td.appendChild(document.createTextNode(dado.cpf));
      }
      tr.appendChild(td);
      var td = document.createElement("td");
      td.appendChild(document.createTextNode(dado.endereco));
      tr.appendChild(td);
      var td = document.createElement("td");
      td.appendChild(document.createTextNode(dado.nome));
      tr.appendChild(td);
      var td = document.createElement("td");
      td.appendChild(document.createTextNode(dado.faturamento));
      tr.appendChild(td);
      var table = document.getElementById("tablePlayer");
      table.appendChild(tr);
    });
  });

});

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>Hello, world!</title>
    </head>
    <body>
        <h1>tabela de players</h1>
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Razao Social ou CPF</th>
                    <th scope="col">Endereco</th>
                    <th scope="col">Nome</th>
                    <th scope="col">Faturamento</th>
                </tr>
            </thead>
            <tbody id="tablePlayer" />
        </table>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>

Explaining the code, I have a table, which could be a modal or anything else... and it’s populated by the data you have on your server..

Have a checking if you have social reason and if you have it does something if not you do something else:

if (dado.razaoSocial != "") {
    td.appendChild(document.createTextNode(dado.razaoSocial));
} else {
    td.appendChild(document.createTextNode(dado.cpf));
}