Using jQuery to insert PHP variable into form input

I have been staring at this problem for hours, but my jQuery skills are quite basic, so please I need some help here.

I have a 3 form inputs. When I click on one of the inputs it opens a bootstrap modal that contains my image gallery (which is populated by PHP), and below each image is an “Insert” button.

When I click the Insert button I wish to pass the title of that image back into the specific input field that I clicked.

I know this should be done with jQuery using “this” but just cant figure it out.

Here is my code so far:

The form fields

<form>
    <div>
    <input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter">
    </div>
    <div>
    <input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter">
    </div>
    <div>
    <input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter">
    </div>
</form>

My image gallery code (with insert button)

<?php
        $query = $conn->query("SELECT * FROM images ORDER BY id DESC");
        if($query->num_rows > 0){
            while($row = $query->fetch_assoc()){
                $imageURL = '../../images/'.$row["file_name"];
                $imageTitle = $row['file_name'];
                $imageID = $row['id'];
        ?>
        <div class="image-gallery-item">
            <div class="image-gallery-img">
            <img class="gallery-img" src="<?php echo $imageURL; ?>" alt="" />
            </div>
            <p class="mt-2"><?php echo $imageTitle; ?></p>
            
            <input onclick="insert('<?= $imageTitle; ?>')" class="btn btn-primary" type="button" data-dismiss="modal" value="INSERT IMAGE">
        </div>

My ineffective piece of jQuery

$(document).ready(function(){
  $(".image_up").click(function insert(image){
    $(this).val(image);
  });
});

Could you prepare a working example of your code on jsFiddle, for some reason I don’t understand what you’re trying to achieve by having image_up input which are duplicated a couple of times. Add CSS, HTML and JavaScript parts.

Do you want to be able to click on:

 <input onclick="insert('<?= $imageTitle; ?>')" class="btn btn-primary" type="button" data-dismiss="modal" value="INSERT IMAGE">

This button and get the title of the image inside that input?