diff --git a/plugins/fipf_wp_plugin/fipf_wp_hooks.php b/plugins/fipf_wp_plugin/fipf_wp_hooks.php
index d21675a..2d117eb 100644
--- a/plugins/fipf_wp_plugin/fipf_wp_hooks.php
+++ b/plugins/fipf_wp_plugin/fipf_wp_hooks.php
@@ -43,10 +43,21 @@ function main_shortcode() {
 		"myvar_2",
 	));
 
-	return create_html( array(
-		"index.html",
-		"index2.html",
-	));
+
+	$names = ["hugo", "camille"];
+	$ages = ["13", "34", "56"];
+	$html_front = create_html(
+		array(
+			"index.html",
+			"index2.html",
+		),
+		compact(
+			"names",
+			"ages",
+		)
+	);
+
+	return $html_front;
 }
 add_shortcode('fipf_wp_plugin', 'main_shortcode');
 
diff --git a/plugins/fipf_wp_plugin/html/index.html b/plugins/fipf_wp_plugin/html/index.html
index c01a927..604ab3a 100644
--- a/plugins/fipf_wp_plugin/html/index.html
+++ b/plugins/fipf_wp_plugin/html/index.html
@@ -1,4 +1,5 @@
 <p>i am a new p</p>
+<p class="first_el_to_change">to change</p>
 <?php
 	foreach($names as $name) {
 		include($template_dir."presentation.html");
diff --git a/plugins/fipf_wp_plugin/html/index2.html b/plugins/fipf_wp_plugin/html/index2.html
index f916190..094ffdc 100644
--- a/plugins/fipf_wp_plugin/html/index2.html
+++ b/plugins/fipf_wp_plugin/html/index2.html
@@ -1 +1,9 @@
+<?php
+	foreach($ages as $age) {
+		?>
+		<p>age <?php echo esc_html($age); ?></p>
+		<?php
+	}
+?>
+<p class="third_el_to_change">to change</p>
 <p>aaaaaand this is the end</p>
diff --git a/plugins/fipf_wp_plugin/html/templates/presentation.html b/plugins/fipf_wp_plugin/html/templates/presentation.html
index a38485d..7584962 100644
--- a/plugins/fipf_wp_plugin/html/templates/presentation.html
+++ b/plugins/fipf_wp_plugin/html/templates/presentation.html
@@ -1 +1,2 @@
 <p>hello <?php echo esc_html($name); ?></p>
+<p class="second_el_to_change">to change</p>
diff --git a/plugins/fipf_wp_plugin/scripts/myscript.js b/plugins/fipf_wp_plugin/scripts/myscript.js
index b0df9fe..5bbed5f 100644
--- a/plugins/fipf_wp_plugin/scripts/myscript.js
+++ b/plugins/fipf_wp_plugin/scripts/myscript.js
@@ -1,5 +1,5 @@
 
-const title = document.querySelector(".has-text-align-center.wp-block-post-title");
-title.innerHTML = "coucou ;)";
+const title = document.querySelector(".first_el_to_change");
+title.innerHTML = "--- coucou ;)";
 
 console.log("myvar_1: " + myvar_1);
diff --git a/plugins/fipf_wp_plugin/scripts/myscript2.js b/plugins/fipf_wp_plugin/scripts/myscript2.js
index 9126324..894f2c1 100644
--- a/plugins/fipf_wp_plugin/scripts/myscript2.js
+++ b/plugins/fipf_wp_plugin/scripts/myscript2.js
@@ -1,4 +1,4 @@
 
-const title2 = document.querySelector(".wp-block-quote");
-title2.innerHTML = "ho boy !";
+const title2 = document.querySelector(".second_el_to_change");
+title2.innerHTML = "--- ho boy !";
 
diff --git a/plugins/fipf_wp_plugin/scripts/myscript3.js b/plugins/fipf_wp_plugin/scripts/myscript3.js
index 7781cfa..da21442 100644
--- a/plugins/fipf_wp_plugin/scripts/myscript3.js
+++ b/plugins/fipf_wp_plugin/scripts/myscript3.js
@@ -1,5 +1,5 @@
 
-const title3 = document.querySelector(".has-text-align-center.wp-block-post-title");
-title3.innerHTML = "bye bye";
+const title3 = document.querySelector(".third_el_to_change");
+title3.innerHTML = "--- bye bye";
 console.log("myvar_2: " + myvar_2);
 
diff --git a/plugins/fipf_wp_plugin/styles/mystyle.css b/plugins/fipf_wp_plugin/styles/mystyle.css
index bb45018..76d5017 100644
--- a/plugins/fipf_wp_plugin/styles/mystyle.css
+++ b/plugins/fipf_wp_plugin/styles/mystyle.css
@@ -1,3 +1,3 @@
-.has-text-align-center.wp-block-post-title {
+.first_el_to_change {
 	border: 1px solid red;
 }
diff --git a/plugins/fipf_wp_plugin/utils/create_html.php b/plugins/fipf_wp_plugin/utils/create_html.php
index 652ac6d..f0999f5 100644
--- a/plugins/fipf_wp_plugin/utils/create_html.php
+++ b/plugins/fipf_wp_plugin/utils/create_html.php
@@ -6,11 +6,13 @@
 #
 # https://stackoverflow.com/a/4402045/9497573
 
-function create_html($files) {
+# takes two arguments :
+# a list of the html files to include in front
+# a list of variables to make available to this files
+function create_html($files, $vars) {
 	$html_dir = plugin_dir_path(__DIR__).'html/';
 	$template_dir = plugin_dir_path(__DIR__).'html/templates/';
-
-	$names = ["hugo", "camille"];
+	extract($vars);
 
 	ob_start();
 	foreach($files as $file) {