Automatic generation of tag into Html webpage

Question

i have these lines of code:

<div class="signals">
  <ul>
    <li><a href="#signal1" class="fancybox">First Signal</a></li>
    <li><a href="#signal2" class="fancybox">Second Signal</a></li>
    <li><a href="#signal3" class="fancybox">Third Signal</a></li>
  </ul>
</div>

<div id="signal1" style="display:none;">
  <p style="color:#fff">First comment for #signal1 id - it will open in a fancybox -.</p>
  <div id="signal2" style="display:none;">
    <p style="color:#fff">Second comment for #signal2 id - it will open in a fancybox -.</p>
  </div>
  <div id="signal3" style="display:none;">
    <p style="color:#fff">Third comment for #signal3 id - it will open in a fancybox -.</p>
  </div>

Here it is the jsfiddle code: JsFiddle

Right now when i want to show different comments, i open my html file and edit the "id #signal , adding more id (or deleting them) when i need it.
The problems is: the signals can be more than the three that are showed up, or even less.
So my question is:
There is a way to generate automatically the divs that i need in a second sheet, where i will insert the comment and all the id's? (a sort of backend)
For example: if one day i need just 2 signals, i will create the #signal1 and #signal2 div, i'll insert the comments and save the secondary sheet.
When i do that, the primary sheet with the html stuff, will show 2 "li" lines:

First Signal

Second Signal

and when i click on of them, the fancybox will open and show the comment, just as the code into the jsfiddle.

I don't know much of php, but there is a way i can do that using it? Or there is a better way?
Hope i can learn from your help.

Answer 1

It seems that you need PHP foreach loop.

You can write the comments in a PHP array, and read them using PHP foreach.

Here is the sample code:

<?php
    $commentsLabels = array('First Signal','Second Signal');
    $commentsTexts = array('First comment for #signal1 id - it will open in a fancybox.','Second comment for #signal2 id - it will open in a fancybox.');       
    //You could use a 2D array to store both comments Labels and comments Texts in one array, but since you are new to PHP, I put them in 2 different arrays to make it easy.
    //You can add more comments texts/labels to the arrays in double/single quotes separated with ','
    //For now, the arrays are filled manually. in future, you can add a DB to store comments and fetch the values from there.

    $counter = 0; 
    //we need a counter to make the comment ids dynamic
?>

<!--GENERATING LABELS-->
<div  class="signals"> 
    <ul>

    <?php
    foreach ($commentsLabels as $commentLabel) { //loop starts
        $counter++; //increasing $counter by 1, for each iteration      
        //We have to add HTML tags outside the php code block.
    ?>
            <li><a href="#signal<?php echo $counter; ?>" class="fancybox"><?php echo $commentLabel; ?></a></li> 
    <?php
        } //loop ends       
    ?>  

    </ul>
</div>

<!--GENERATING POPUPS-->
<?php
    $counter = 0; //reset counter

    foreach ($commentsTexts as $commentText) { //loop starts
        $counter++; 
?>
        <div id="signal<?php echo $counter; ?>" style="display:none;"><p style="color:#fff"><?php echo $commentText; ?></p></div>
<?php
    } //loop ends
?>

I hope this helps you start. :-)