PHP, Javascript - Outputting date to 'each' grid independantly

Basically, I want to input the date into 'item5' when I click on the image in item6 with every new flavour independently. (as well it switching the image, as I have it). The way I have it set at the moment, it does do - but it only occurs in the first instance of the class. I would like it to enter into each new container, the way that I have with the src-change function (this method of not using IDs is new to me). However, I cannot figure how to forward the date into the item5 of every new instance. Do I need to rejig my code, or am I missing something simple here?

<?php
  $FLAVOUR = $_GET['flavour'];

  $stmt = $conn->prepare("SELECT * FROM node WHERE node.flavour = :flavour");
  $stmt->bindValue(':flavour',$FLAVOUR);
  $stmt->execute();

  $flavours = $stmt->fetchALL();
  echo "<div class='grid-container'>";
  echo "<div class='item1'>Header</div>";
  echo "</div>";

  if($flavours){
    foreach ($flavours as $flavour) {
      echo "<div class='grid-container'>";
      echo "<div class='item2'><img src='{$flavour['image']}'></div>";
      echo "<div class='item3'>{$flavour['flavour']}</div>";
      echo "<div class='item4'>{$flavour['area']}, <button class='btn' data-clipboard-text='{$flavour['link']}'>{$flavour['waypoint']}</button></div>";
      echo "<div class='item5'><p id='p1'></p></div>";
      echo "<div class='item6'><img src='https://i.imgur.com/yymBeSS.jpg' onclick='checkAtreyu(this)'  /></div>";
      echo "</div>";
    }
    echo "";
  }
else
{
  echo "<p>Can't find any destination records.</p>";
}
?>

javascript:

<script language="javascript">
    function checkAtreyu(element) {

        if (element.src == "https://i.imgur.com/yymBeSS.jpg") 
        {
            element.src = "https://i.imgur.com/ZlTnzBL.jpg";
            document.getElementById("p1").innerHTML = Date();
            //element.innerHTML = Date();
        }
        else 
        {
            element.src = "https://i.imgur.com/yymBeSS.jpg";
        }
    }
</script>