add an incrementing number to id with php - php

Question

I am making a portfolio site with kirby cms.
my site is a single page website. I want to add an incrementing number after id by using foreach in the part shown in the code below..!
Is there easy way to do..?
regards,
<?php foreach ($pages->listed() as $p): ?>
<div class="slideshow">
<div class="slideshow-box">
<div class="slideshow-holder">
<?php foreach ($p->images() as $workimage): ?>
<div class="slide">
<?= $workimage ?><br><br>
</div>
<?php endforeach ?>
</div>
<div class="tooltip">
<p id="myText📍<here>"><?= $p->worktitle() ?></p>
</div>
<div class="toolbox" id="myDIV📍<here>">
<?= $p->description() ?>
</div>
</div>
<div class="actions">
<span>1/3</span>
</div>
←
→
</div>
<?php endforeach ?>
<script>
var button📍<here> = document.getElementById('myText📍<here>');
var div📍<here> = document.getElementById('myDIV📍<here>');
div📍<here>.style.display = 'none';
button📍<here>.onclick = function () {
if (div📍<here>.style.display !== 'none') {
div📍<here>.style.display = 'none';
} else {
div📍<here>.style.display = 'block';
}
};
</script>

Answer 1

I know I am late to the party, but here is my version.
You can actually just set a $counter Variable before the foreach() and just count it up right before the end of the foreach.
Furthermore I would you data-attributes and query them instead of an id.
Here's my Code. I tested it and it worked fine. If there are any questions let me now.
<?php $counter = 1;
foreach ($pages->listed() as $p): ?>
<div class="slideshow">
<div class="slideshow-box">
<div class="slideshow-holder">
<?php foreach ($p->images() as $workimage): ?>
<div class="slide">
<?= $workimage ?><br><br>
</div>
<?php endforeach ?>
</div>
<div class="tooltip">
<p data-tooltip="<?= $counter ?>"><?= $p ?></p>
</div>
<div class="toolbox" data-toolbox="<?= $counter ?>" style="display: none;">
<?= $p ?>
</div>
</div>
</div>
<?php $counter++; endforeach ?>
<script>
const TOOLTIPS = document.querySelectorAll('[data-tooltip]');
TOOLTIPS.forEach(TOOLTIP => {
TOOLTIP.addEventListener('click', () => {
const TOOLBOX = document.querySelector(`[data-toolbox="${TOOLTIP.dataset.tooltip}"]`);
if (TOOLBOX) {
if (TOOLBOX.style.display !== 'none') {
TOOLBOX.style.display = 'none';
} else {
TOOLBOX.style.display = 'block';
}
}
});
});
</script>