Error Messages For Entire Form Are Being Outputted On Each Instance Of A Loop – PHP

I have a form that outputs images and some HTML <input> elements for adding titles and tags to images. This is outputted onto the page using a while loop inside a <form> element. The submit button for the form is outside of the loop, so you can submit multiple images one go.

When an error is present I would like to output the error message for that particular instance of the image component inside its related upload component – namely the div with the class upload-component. Is that possible with PHP or is it better to just prevent the form processing with PHP if an error is found (e.g. an empty title input element), and then show the specific errors with JavaScript for that particular image component (which I should be able to work out how to do with JS)?

Currently when an error is found the PHP outputs each error for the entire form in each component – i.e. if there are 3 errors on just one component, 3 error messages appear appear at the top of every component in the loop. This is obviously being caused by using a foreach loop to output the errors. When I remove the foreach though it doesn’t output anything because it can’t process the array of potential errors?

NOTE: The $user_id variable is assigned through a $_SESSION when the user is logged in.

Many thanks in advance for any help.

<?php 

if(isset($_POST['upload-submit'])) {
    
    $image_title = $_POST['image-title'];
    $image_tags = $_POST['image-tags'];
    $image_id = $_POST['image-id']; // value attribute from hidden form element

    // check for errors - empty title input element not allowed
    forEach($image_title as $title) {
        if(empty(trim($title))){
            $error[] = "Image Title must be between 10 and 150 characters long";
        }
    }

    if (!isset($error)) {

        // ---- UPDATE DATABASE WITH PDO STATEMENTS IF NO ERRORS

    } 
}
?>

<form method="post" enctype="multipart/form-data">

    <!-- IMAGE COMPONENT - START -->

        <?php

        $stmt = $connection->prepare("SELECT * FROM lj_imageposts WHERE user_id = :user_id");

        $stmt->execute([
            ':user_id' => $user_id
        ]); 

        while ($row = $stmt->fetch()) {
            $db_image_id = htmlspecialchars($row['image_id']);
            $db_image_title = htmlspecialchars($row['image_title']);
            $db_image_tags = htmlspecialchars($row['image_tags']);
        ?>

    <div class="upload-component">                
        <?php 
            // echo error messages from above
            if(isset($error)) {
                foreach($error as $msg) {
                    echo "<p>** ERROR: {$msg}</p>";
                }
            }
        ?>
            <div class="upload-image-wrapper">
                <img class="img upload-details-img" src="project/img/image.jpg">
            </div>
            <div class="edit-zone">
                <div class="form-row">
                    <label for="title-id-<?php echo $db_image_id; ?>">Image Title</label>
                    <input id="title-id-<?php echo $db_image_id; ?>" value="<?php $db_image_title; ?>" type="text" name="image-title[]">
                </div>
                <div class="form-row">
                    <label for="tags-id-<?php echo $db_image_id; ?>">Comma Separated Image Tags</label>
                    <textarea id="tags-id-<?php echo $db_image_id; ?>" type="text" name="image-tags[]"></textarea>
                    <input type="hidden" name="image-id[]" value="<?php echo $db_image_id; ?>">
                </div>
            </div>
    </div>

    <?php } ?>

    <div class="form-row">
        <button type="submit" name="upload-submit">COMPLETE UPLOAD</button>
    </div>
</form>