Ajouter un select dans du javascript

Bonjour a tous,
j'ai une fonction javascript qui fonctionne parfaitement , elle me permet de cacher et d'afficher des champs de textes apres element choisi dans un select. Si un s'affiche l'autre est cache vice versa. Je voudrais ajouter un select qui tire ses donnees dans une base avec codes php dans la deuxieme div qui contient la deuxieme partie des champs de textes. C'est la mon probleme je ne vois comment inserer le select a cause du php dans la fonction javascript en question je poste mes codes

 function hide () {
    console.log("whatever")
  }

function visibilite1(_this) {
    var formgroup1 = '<div id="test1" class="divs"><label>Name </label><input type="text" name= "name" id= "name" required>  </br><label>User name </label><input type="text" name= "username" id= "username"  required></br><label >Password <em>*</em></label><input type="password"   name= "password" id= "password" required></br></div>'

    var formgroup2 = '<div id="test2" class="divs"><label>Name </label><input type="text" name= "name" id= "name" required><label>User name </label><input type="text" name= "username" id= "username"  required><label>Password <em>*</em></label><input type="password"   name= "password" id= "password" required><input type="text" name= "username" id= "username"  required><label>Adress<em>*</em></label><input type="text"   name= "adress" id= "adress" required></div>'

    var formtestElement = document.getElementById('formtest'); 

    if (_this.value == "test1") {
      formtestElement.innerHTML = formgroup1
    } else if (_this.value == "test2") {
      formtestElement.innerHTML = formgroup2
    };
  }

<select name="role" id="role"
  onchange="visibilite1(this);hide()" >
  <option value='test1'>Year1</option>
  <option value='test2'>Year2</option>
</select>

<div id="formtest">
  <div id="test1" class="divs">
    <label>Name </label>
    <input type="text" name="name" id="name" required>  </br>
    <label>User name </label>
    <input type="text" name="username" id="username" required></br>
    <label>Password <em>*</em></label>
    <input type="password" name="password" id="password" required></br>
  </div>
</div>

dans la partie var formgroup2 = '<div id="test2" class="divs"> je voudrais ajouter ce select:

  
$sql="select ClientName from claims_follow_up.Client where id !='10001' order by ClientName asc "; 
 $req=mysqli_query($dbc,$sql) or die("Erreur d'execution"); 

 <select name="ClientName" id="ClientName"
onchange="
var maVal = document.getElementById('ClientName').value;
if (maVal == 'Create new client')
{
    
  window.open('newClientCreate.php', 'blank', 'scrollbars=yes, resizable=no, top=50, left=155, width=1200, height=700');
	
};activer()" required disabled="true" onkeypress="activerSubmit()">
	<option value="">select client </option>
	  <code php> 
      while($d=mysqli_fetch_array($req)) 
                { 
                echo'<option value="'.$d['ClientName'].'">'.$d['ClientName'].'</option>'; 
				
                } 
 mysqli_free_result($req); 
                
               

<option value="Create new client" style="color:blue; font-weight:bold">create new client</option>

</select>
</code>
C'est ca mon probleme la structure de la fonction js ne peut pas recevoir le select en question. Or l'objectif du code c'est de cacher et d'afficher des champs de texte tout depend du choix dans le select role.
Je compte beaucoup sur votre aide. Et si vous avez une autre proposition pour faire cela j'en serais ravi.
Merci et a+