So, this is how things are typically done. Your PHP and HTML are separate – ideally in separate files, but at the very least you should not be outputting large chunks of your page with echo statements. Break out of PHP mode to output most of your page, only going back in when a variable needs to be output, or you need a control structure like a loop. In this code I used alternative syntax for control structures, and the short echo tag to make things (IMO) neater. Final note, use htmlspecialchars() to ensure values are escaped properly.
As for the JavaScript, you should be using event listeners to attach actions to elements, like the following example. This is easier with a library like jQuery, but is simple enough to do with native DOM code as well.
<?php
$conn = ...
$sql = "SELECT id, naam, adres, email FROM klanten";
$result = $conn->query($sql);
// do some error checking on the result before proceding
?>
<html>
...
<table>
<?php foreach($result->fetch_assoc() as $row): ?>
<tr>
<td><?=htmlspecialchars($row["id"])?></td>
<td><?=htmlspecialchars($row["naam"])?></td>
<td><?=htmlspecialchars($row["adres"])?></td>
<td><?=htmlspecialchars($row["email"])?></td>
<td>
<a href='index.php'>
<i class='fas fa-pen'></i>
</a>
</td>
<td>
<a href="delete.php?id=<?=htmlspecialchars($row["id"])?>" class="delete">
<i class="fas fa-user-times"></i>
</a>
</td>
</tr>
<?php endforeach ?>
</table>
...
<script>
// look for every element with the "delete" class
var links = document.getElementsByClass("delete");
// loop over each one that we find
for (var i = 0; i < links.length; i++) {
// run a function when the element is clicked
links[i].addEventListener("click", function(e) {
return confirm("Are you sure?");
}, false);
}
</script>
