Afficher variable php dans onclick js

Bonjour

Voic quelques années, vous m'aviez aider a faire afficher du texte sur clique bouton avec un peu de JS.

AUjourd'huit, je voudrais réutiliser ceci car cela fonctionne très bien. (pou info https://lacanseradelcamino.com/lacansera/es/libro/page_livredor_consult.php).

J'ai un fichier php dans lequel j'ai des variable dont certaine comporte  "not_breve".

je récupère les variables et leurs valeur dans une boucle.

$fp =  file("../texto.php");
	foreach($fp as $line)
	{ 
		if(strpos($line, "not_breve_")!==FALSE)
			{ $texto = substr($line, strpos($line, "=")+2) ; // supprime texte avant = + 2 caractere
			 $texto_2 = str_replace("\';","",$texto); // le "; et texte suivant
			$texto_breve = str_replace("\";", "", $texto_2); //supprime " du debut
			$titulo = substr($texto_breve, 0, strpos($texto_breve,"¬"));//extrait le titre
			$text = strstr($texto_breve,"¬");//extrait le texte
			echo '<div class="libro">	<div class="libronombre"><b>'.$titulo.'</b> </div>';//affiche el titre
			
			if(strlen($text)>200)
			{$text_court =substr($text, 0,200); 
			?>
			<script type="text/javascript">
			var titulo = <?php echo json_encode($titulo)?>; 
			</script>
			<?php
			echo '<p id="texte_court'.$titulo.'" style="padding: 10px;">'.$text_court.'</p><div id="a_manipuler'.$titulo.'"style="display: none"><p style="padding: 10px; color:white;">'.$text.' </p><br /></div><div align="center"><button class="button_libro" style="align: center;" id="toaffich'.$titulo.'" onclick="affichManipul(titulo)"> &#32;&#32;&#32; <H1>+</H1> &#32;&#32;&#32;</button> <br><br></div> ';
			}
			
			else
			{
			echo '<p  style="padding: 10px;">'.$text.'</p> ';
			}	
			echo "</div><br><br>";
			}
	}?>

Le JS

function affichManipul(chaine_caratere){
  if(document.getElementById('a_manipuler'+chaine_caratere).style.display == "none") {
    document.getElementById('a_manipuler'+chaine_caratere).style.display = "block";
    document.getElementById('texte_court'+chaine_caratere).style.display = "none";
    document.getElementById('toaffich'+chaine_caratere).innerHTML = "&#32;&#32;&#32;<h1>-</h1>&#32;&#32;&#32;";
  } else {
    document.getElementById('a_manipuler'+chaine_caratere).style.display = "none";
    document.getElementById('texte_court'+chaine_caratere).style.display = "block";
    document.getElementById('toaffich'+chaine_caratere).innerHTML = "&#32;&#32;&#32;<h1>+</h1>&#32;&#32;&#32; ";
  }
}

Le probleme est ici ==> onclick="affichManipul(titulo)".

Le probleme est que "titulo" reste avec la dernière valeur de la boucle.

Donc quand je clique sur + pour developer le texte, il developpe le dernier texte et non le texte que je veux. voir https://lacanseradelcamino.com/lacansera/es/noticias/pre_page_noticias_breves.php

Le code source de ma page donne :

<p id="not_textcat">LAS CORTAS</p>
		<br>
		
<div class="libro">	<div class="libronombre"><b>titulo_breve_2</b> </div>			<script type="text/javascript">
			var titulo = "titulo_breve_2"; 
			</script>
			<p id="texte_courttitulo_breve_2" style="padding: 10px;">¬breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002vvvbreve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 000</p><div id="a_manipulertitulo_breve_2"style="display: none"><p style="padding: 10px; color:white;">¬breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002vvvbreve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002breve 0002breve 0002breve 0002breve 0002breve 0002breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002vvvbreve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002 breve 0002breve 0002breve 0002breve 0002breve 0002breve 0002
 </p><br /></div><div align="center"><button class="button_libro" style="align: center;" id="toaffichtitulo_breve_2" onclick="affichManipul(titulo)"> &#32;&#32;&#32; <H1>+</H1> &#32;&#32;&#32;</button> <br><br></div> </div><br><br><div class="libro">	<div class="libronombre"><b>titulo_breve_3</b> </div>			<script type="text/javascript">
			var titulo = "titulo_breve_3"; 
			</script>
			<p id="texte_courttitulo_breve_3" style="padding: 10px;">¬Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categori</p><div id="a_manipulertitulo_breve_3"style="display: none"><p style="padding: 10px; color:white;">¬Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria Elige una categoria 
 </p><br /></div><div align="center"><button class="button_libro" style="align: center;" id="toaffichtitulo_breve_3" onclick="affichManipul(titulo)"> &#32;&#32;&#32; <H1>+</H1> &#32;&#32;&#32;</button> <br><br></div> </div><br><br>   
		
<br><br>

 Pourriez-vous me dire comment je dois passer ma variable "titulo"