26-Jul-2022, 12:26 AM
I'm creating a small php website using a webcam API where I'd like to have a separate commentics comment box under each video for people to comment on their trip to a specific beach. I'm somewhat new to web dev and I'm trying to figure out how I can get a separate working comment box under each video. As of right now, I am able to get comment boxes under each video, but as you can see from the photo they are glitched out and when I submit a comment in the first one, it just keeps flooding comments to the DB even with flood protection on, submitted comments won't show, etc. Basically the way I've gone about things has created a glitched out mess 
.
Here is a snippet of where I have the commentics php code in my HTML.
Any help would be greatly appreciated.
.Here is a snippet of where I have the commentics php code in my HTML.
Any help would be greatly appreciated.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Beach</title>
</head>
<br><br>
<body>
<div class="container">
<div class="row">
<h1>Beach info</h1>
</div>
<div class="row">
<?php foreach ($json['result']['webcams'] as $re) { ?>
<div class="col-md-4">
<div class="thumbnail">
<a href="https://www.windy.com/webcams/<?= $re['id'] ?>">
<img src="<?= $re['image']['current']['thumbnail'] ?>" alt="Lights" style="width:100%">
<div class="caption">
<p><?= $re['title'] ?></p>
</div>
</a>
</div>
<?php
$cmtx_identifier = '1';
$cmtx_reference = 'Page One';
$cmtx_folder = '/lifesabeach/comments/';
require($_SERVER['DOCUMENT_ROOT'] . $cmtx_folder . 'frontend/index.php');
?>
</div>
<?php } ?>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>