I have a PHP query that echoes a div for each row in the table. I want the div to slide up and then, when the user clicks the "read more" button, the div slides down. However, since it is echoed in a loop, all the divs have the same IDs and classes. I would like the "read more" button to affect only the div it is in, not the others.
<?php
include 'includes/database.php';
$results = $user->getBlogs();
?>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Dundalk Healthcare Service</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/blog.css" rel="stylesheet" type="text/css"/>
<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">
</head>
<body>
<?php
include 'includes/header.php';
?>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<h1 class="mt-4 mb-3">Our Blog
<small></small>
</h1>
<!-- Image Header -->
<img class="img-fluid rounded mb-4" src="img/blog1.png" alt="">
<!-- Blog
<!-- Blog Post -->
<?php
foreach ($results as $r) {
echo "
<div class='card mb-4'>
<div class='card-body' >
<div class='row'>
<div class='col-lg-6'>
<a href='#'>
<img class='img-fluid rounded' src='img/blog2.jpg' alt='cold sore'>
</a>
</div>
<div class='col-lg-6'>
<h2 class='card-title'>".$r['b_title']."</h2>
<p class='card-text'>".$r['b_text']."</p>
<button class='btn btn-primary read-more-btn' id='bb' data-target='content_".$r['id']."'>Read More</button>
</div>
</div>
</div>
<div class='card-footer text-muted'>
Posted on ".$r['b_date']." by
".$r['b_poster']."
</div>
</div>";
} ?>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
</div>
<!-- /.container -->
<!-- Footer -->
<?php
include 'includes/footer.php';
?>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
var now = new Date();
var Christmas = new Date("Tuesday 25, 2018");
if(now < Christmas) // today is before valentine
{
alert("Happy Christmas Everyone please keep warm in this weather!💖💖💖");
}
else
{
alert("Christmas is nearly here, dont forget your flu vaccine!💔💔💔💔💔");
}
});
$('.read-more-btn').click(function() {
var target = '#' + $(this).attr('data-target');
$(target).find('p.card-text').slideToggle();
});
</script>
</body>
</html>