Javascript not working in PHP foreach? - php

Question

I'm using this code to get a maximum of text in a p tag. For one reason this code only runs on the first card in my foreach but not on the second.
Here you see the problem: https://gyazo.com/c3ef858fb233b21b31098fb1682a7ce4
Here is my javascript code:
<script>
function truncateText(selector, maxLength) {
var element = document.querySelector(selector),
truncated = element.innerText;
if (truncated.length > maxLength) {
truncated = truncated.substr(0,maxLength) + '...';
}
return truncated;
}
</script>
[PHP CODE]
<?php
$stmt = $conn->prepare("SELECT naam, prijs, beschrijving, id, image1 FROM salontafels");
$stmt->execute([]);
$rows = $stmt->fetchAll();
foreach ($rows as $row) : { ?>
<a class="formtitellink" href="productsalontafels.php?rowid=<?= $row['id'] ?>">
<?php } echo '
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="data:image/jpeg;base64,' . base64_encode( $row['image1'] ) . '" />
<div class="card-body">
<h4 class="card-title">
' . $row['naam'] . '</a>
</h4><script> document.querySelector(\'p\').innerText = truncateText(\'p\', 100);</script>
<h5> Log in voor de prijs </h5>
<p class="card-text">' . $row['beschrijving'] . '</p>
</div>
<div class="card-footer">
<small class="text-muted">beschikbaar</small>
</div>
<!-- /.row -->
</div>
<!-- /.col-lg-9 -->
</div>'?>
Does anyone knows what is wrong?

Answer 1

Your problem is that document.querySelector('p') returns the first Element within the document that matches the specified selector. So it just returns the first p tag every time it's run.
This means that these two lines are your problem:
document.querySelector(\'p\').innerText = truncateText(\'p\', 100)
and
var element = document.querySelector(selector)
To fix it, you will need to select the specific element you're interested in each time
[If you want working code, rather than an answer to your question, I suggest just using substr($row['beschrijving'],0,100)]