We Keep Coding

can't download wordpress posts using javascript

hello i have a list of posts and i use javascript to download a post as pdf
but i have a problem because the download button works just on the first post and not in the others and when i inspect the button in the browser i can see the description below but the button not working
this is a part of my code if some one could help :
ps: the download button is : Imprimer l'offre
<li style=" border: 1px solid black; padding: 20px; margin-bottom: 30px;" <?php job_listing_class(); ?> data-longitude="<?php echo esc_attr($post->geolocation_long); ?>" data-latitude="<?php echo esc_attr($post->geolocation_lat); ?>">
<!-- <a href="<?php the_job_permalink(); ?>">
-->
<!-- <?php the_company_logo(); ?> -->
<div class="work-section">
<h3><?php wpjm_the_job_title(); ?> <?php echo "Job ID: " . $post->ID ?> </h3>
<!-- <div class="company">
<?php the_company_name('<strong>', '</strong> '); ?>
<?php the_company_tagline('<span class="tagline">', '</span>'); ?>
</div> -->
</div>
<!-- <div class="location">
<?php the_job_location(false); ?>
</div> -->
<div id="tblCustomers">
<div id="collapseExample<?php echo $post->ID ?>" class=" collapse job_description">
<?php wpjm_the_job_description(); ?>
</div>
<div id="print-btn"></div>
</div>
<center>
<div class="vc_btn3-container red-btn vc_btn3-inline" style="margin-top: 20px">
<button id="pdfview" data-target="<?php echo $post->ID ?>" style="text-align: center;">
Imprimer l’offre
</button>
<div id="pdfdiv" style="display: none;">
<?php wpjm_the_job_description(); ?>
</div>
<div id="editor"></div>
<script type="text/javascript">
var $ = jQuery.noConflict();
$(window).on('load', function() {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
$('#pdfview').click(function() {
doc.fromHTML($('#pdfdiv').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.save('file.pdf');
});
});
</script>
</div>

how to solve card does not change colour using javascript function

I want to implement this feature, the card element will turn grey color when the product_stock == 0. I tried to implement this feature using javascript but it does not work. I do not know what is wrong with my codes. Can anyone of you help me with this issue? It would be appreciated if you guys can show me examples of codes on how to solve this issue. Any help will be appreciated. Thanks!
This is my PHP codes
<?php
$sql = "SELECT * FROM (( SELECT * FROM products) as YW1
LEFT JOIN
(SELECT product_id, SUM(quantity) totalquantity FROM ordered_items GROUP BY product_id) AS YW2 ON YW1.id = YW2.product_id) ORDER BY totalquantity DESC ";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
$product_stock = $row['product_stock'];
?>
<div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;" >
<div class="product-wrapper" id="productlist">
<img class="product-img" loading="lazy" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
<div class="card-body" >
<h5 class="product-title" style="min-height: 39px; text-decoration: none; width:150px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-align: left !important;"><?php echo $row['product_title']; ?></h5>
<p class="product-price">RM<?php echo $row['product_price']; ?>/KG</p>
<p style="font-size: 10px; margin-top:-10px; margin-bottom:-2px;" ><span class="text-danger" > <?php echo $sum = $row['totalquantity'] ?? 0;?> SOLD </span></p>
<p style="font-size: 10px;" ><span class="text-success"><?php echo $row['product_stock']; ?> IN STOCK </span></p>
View More
</div>
</div>
</div>
<?php
}
}
?>
This is the javascript that i used to make the card into grey colour when the product_stock = 0
UPDATED JAVASCRIPT CODE
<script>
getfocus();
function getfocus() {
document.getElementById("productlist").focus();
var product_stock = "<?php echo $product_stock; ?>";
if(product_stock == 0) {
$(product_stock).focus();
$(product_stock).css({'border' : '1px solid red'});
$(product_stock).css("background-color", "#d0d0d0");
}
}
</script>

it's because the product_stock variable is undefined when you call it on the script.
instead of using javascript code, just add the style directly to the PHP code.
while ($row = $query->fetch_assoc()) {
$product_stock = $row['product_stock'];
?>
<div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;" >
<div class="product-wrapper" id="productlist" style='<?php echo $product_stock == 0 ? "background-color:#d0d0d0; border:1px solid red;" : ""; ?>'>
<img class="product-img" loading="lazy" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
<div class="card-body" >
<h5 class="product-title" style="min-height: 39px; text-decoration: none; width:150px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-align: left !important;"><?php echo $row['product_title']; ?></h5>
<p class="product-price">RM<?php echo $row['product_price']; ?>/KG</p>
<p style="font-size: 10px; margin-top:-10px; margin-bottom:-2px;" ><span class="text-danger" > <?php echo $sum = $row['totalquantity'] ?? 0;?> SOLD </span></p>
<p style="font-size: 10px;" ><span class="text-success"><?php echo $row['product_stock']; ?> IN STOCK </span></p>
View More
</div>
</div>
</div>
<?php
}

Retrieve ACF unique ID generated by repeater field for use in a JavaScript function

I'm using advanced custom fields to repeat divs. There is a unique ID injected into the wrapper div for a click function that reveals content (i can't use a class because it triggers all the divs at once).
How do I target this ID in my javascript function dynamically? Here is my code;
<?php if( have_rows('team') ): $i = 0; ?>
<?php while( have_rows('team') ): the_row(); $i++;
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" id="wrap-<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
And my function;
<script>
(function($) {
$('#wrap-1').on('click',function(){
$('#show-1').slideToggle('slow');
});
$('#show-1 .close').on('click',function(){
$('#show-1').slideToggle('slow');
});
})( jQuery );
</script>
Edit: the id is dynamically injected here;
id="wrap-<?php echo $i; ?>"

I would add the ID to each element in a data attribute, and use this and that ID to toggle appropriately. To summarize the JS, when you click on the button, you get the stored data attribute, which can be used to find the appropriate target for toggling.
To the HTML, I add the data ID to the #show divs, and removed the id completely from the button. It's not needed.
HTML changes:
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
and
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">`
Javascript
(function($) {
$('.teamInfo').on('click', function() {
var id = $(this).data('toggle-id');
$('#show-' + id).slideToggle();
});
$('.card-reveal .close').on('click',function() {
var id = $(this).closest('.card-reveal').data('toggle-id');
$('#show-' + id).slideToggle('slow');
});
})( jQuery );
And the entire HTML as you posted it:
<div class="small-12 medium-4 large-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>

I'd look at using this. You can still use a class for an event selector, and in the handler, have context to know which was selected.
<script>
(function($) {
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
})( jQuery );
</script>
^ i'm not clear if you were adding the .close class for a visual cue or if you wanted to use that to trach shown state. Might just need the one handler to act as a toggle. Or an if statement in the toggle if other things need to happen on the transition.

Remove Post View Count at the end of the Content

I have a 4.3 wordpress system that i install on it the "Orca Theme".
I notice i have duplicate indication of Post View Count:
I want to remove the First Indicator.
I try to look around amd search in the theme code and didnt find what display the First indicator.
postformat/standart.php:
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id, 'postlist', true);
$title_meta = get_post_meta($post->ID, 'title_style', true);
$title_meta = ($title_meta == ('banner' || 'title')) ? $title_meta : "standard";
$category = get_the_category();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> class="post standard">
<?php if($title_meta == "banner"){ ?>
<a class="basicfeature" href="<?php esc_url(the_permalink()); ?>" style="background-image:url('<?php echo esc_url($thumb_url[0]); ?>');"></a>
<h1><?php the_title(); ?></h1>
<?php }elseif($title_meta == "feature"){ ?>
<a href="<?php esc_url(the_permalink()); ?>" class="largeimage postfeature" style="background-image:url('<?php echo esc_url($thumb_url[0]); ?>');">
<div class="shadow"></div>
<h1><?php the_title(); ?></h1>
</a>
<?php }else{ ?>
<h1><?php the_title(); ?></h1>
<?php } ?>
<div class="info">
<div class="left">
<i class="issticky fa fa-thumb-tack "></i><img src="http://0.gravatar.com/avatar/<?php echo esc_attr(md5(get_the_author_meta('user_email'))); ?>?s=32" alt="author" class="minigravatar"><?php the_author(); ?>
</div>
<div class="right">
<i class="fa fa-clock-o"></i><?php echo esc_html(orca_get_time()); ?>
<div class="category"><i class="fa fa-tags"></i>
<?php if($category){
echo '' . $category[0]->name.' ';
} ?>
</div>
</div>
</div>
<div class="postcontents">
<?php the_content('', FALSE, ''); ?>
</div>
<div class="footer">
<?php esc_html_e('Read More', 'orcawp'); ?>
<i class="fa fa-comments"></i><?php echo esc_html(get_comments_number($post->id)); ?>
<?php if(get_post_meta($post->ID, '_count-views_all', true) != ''){ ?>
<i class="fa fa-bullseye"></i><?php echo esc_html(get_post_meta($post->ID, '_count-views_all', true)); ?>
<?php } ?>
</div>

Solve it!
I just Deactivated the "BAW Post Views Count" plugin and now it removed!

PHP | Textarea won't clear after Submit, tried several times

So as you can read in my title, I am trying to Clear my Textarea after I submitted my Chat Message to my DB. I tried it several ways, like setting the value to null (""), which just lead to another problem, the Textarea gets cleared before PHP can insert the Value of the Textarea into the DB.
Here's my code:
<?php
include_once("../workspace/dbFunction.php");
//make an array for anime
$last_added = mysqli_query($mysqli,'SELECT * FROM anime ORDER BY `anime`.`created_at` DESC LIMIT 8');
$last_add = array();
while($row = mysqli_fetch_assoc($last_added)){
$last_add[] = $row;
}
//make array for anime
$data_arr = mysqli_query($mysqli,'SELECT * FROM anime');
$latestAnime = array();
while($row = mysqli_fetch_assoc($data_arr)){
$latestAnime[] = $row;
}
// Make lates episodes arr
$lat_ep = mysqli_query($mysqli,'SELECT * FROM episodes ORDER BY `created_at` DESC');
$latestEpisode = array();
while($row = mysqli_fetch_assoc($lat_ep)){
$latestEpisode[] = $row;
}
$random = $mysqli->query('SELECT * FROM anime ORDER BY RAND() LIMIT 1');
$count = 1;
?>
<?php include_once "../includes/header.inc.php"; ?>
<link rel="stylesheet" href="../css/owl.carousel.min.css">
<link rel="stylesheet" href="../css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="includes/utils/chat/css/main.css">
<script >
function ajax(){
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if(req.readyState == 4 && req.status == 200){
document.getElementById('chat').innerHTML = req.responseText;
}
}
req.open('GET','includes/utils/chat/chat.php',true);
req.send();
}
setInterval(function() {ajax()}, 1000);
</script>
<style>
/* Carousel */
.owl-carousel .carousel-item-o {
background: #fff;
border: 1px solid #D9D7DA;
text-align: center;
}
.owl-carousel .carousel-item-text {
padding: 12px;
}
.owl-carousel .carousel-item-o .item-kicker {
color: #9A5053;
display: block;
font-size: .8em;
font-weight: 600;
height: 30px;
margin-bottom: 16px;
overflow: hidden;
text-transform: uppercase;
}
.owl-carousel .carousel-item-o .item-title {
color: #646464;
font-size: 1em;
font-weight: 600;
height: 38px;
margin: 0;
overflow: hidden;
}
.owl-dots {
margin-top: 40px;
text-align: center;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127, 127, 127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127, 127, 127, 1);
}
</style>
<?php include_once "../includes/nav.inc.php"; ?>
<?php include_once($_SERVER['DOCUMENT_ROOT'] . "/includes/parallax.inc.php"); ?>
<body class="elegant-color" onload="ajax();">
<div class="container-fluid" style="width:80%;">
<div class="row">
<div class="col-md-9">
<div class="col-md-12">
<div id="new_releases">
<p class="h2 text-white">Neuste Folgen</p>
<div class="row">
<?php foreach($latestEpisode as $lat_ep){ ?>
<?php foreach($latestAnime as $row) { ?>
<?php if( $lat_ep['anime_id'] == $row['id'] && $row['calender_id'] != 0){ ?>
<?php $count++; ?>
<div class="col-md-3 mb-3">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view" style="height:100%;">
<img src="<?php echo $row['img']; ?>" class="card-img-top" alt="photo">
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title"><?= $lat_ep['name'] ?></h4>
<p class="text-muted m-0">Folge <?= $lat_ep['nr'] ?></p>
<span class="h6"><?= $row['name'] ?></span>
</div>
</div>
<!--/.Card-->
</div>
<?php } ?>
<?php if($count == 1){ ?>
<?php break; ?>
<?php } ?>
<?php }?>
<?php } ?>
</div>
</div>
</div>
<div class="col-md-12">
<div id="new_releases">
<p class="h2 text-white">Zuletzt Hinzugefügt</p>
<div class="row">
<?php foreach($last_add as $row) { ?>
<div class="col-md-3 mb-3">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view" style="height:100%;">
<img src="<?php echo $row['img']; ?>" class="card-img-top" alt="photo">
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title"><?php if($row['su'] == 'sub'){echo $row['name'] . " Ger Sub";} elseif($row['su'] == 'dub'){ echo $row['name'] . " Ger Dub";} ?></h4>
<!--Text-->
<p class="card-text"><?php if (strlen($row['description']) > 79){ echo $str = substr($row['description'], 0, 80) . '...';}else{echo $row['description'];}; ?></p>
</div>
</div>
<!--/.Card-->
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="ibox-content elegant-color mt-2">
<div class="row elegant-color">
<div style="margin: 0 auto;" class=" col-md-12 elegant-color">
<div class="chat-discussion elegant-color">
<div class="chat-message left">
<div id="chat"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row elegant-color" style="margin: 0 auto;">
<div style="margin: 0 auto;" class="col-md-12">
<iframe name="votar" style="display:none;"></iframe>
<form method="POST" id="form" target="votar">
<?php
if(isset($_SESSION['username']) && !empty($_SESSION['username'])){
echo '<textarea name="message" class="area" id="area" placeholder="Enter your message" required="" value=""></textarea>';
echo '<button type="submit" style="margin: 0 auto;" style="color: white;" class="btn btn-block btn-success w-50" name="submitbtn">Send It</button>';
} else {
echo '<center><h5 class="white-text" style="margin: 0 auto;">Please login to send messages!</h5></center>';
}
?>
</form>
</div>
</div>
<hr>
<?php include_once "../includes/sidebar.inc.php"; ?>
</div>
</div>
</div>
<?php include_once "../includes/footer.inc.php"; ?>
<?php
if(isset($_POST['submitbtn'])){
$typeOfClear = "";
$name = $_SESSION['username'];
$message = $_POST['message'];
$query = "INSERT INTO chat (name, message) VALUES ('$name','$message')";
$run = $mysqli->query($query);
if($run){
echo "<audio src='includes/utils/chat/sounds/notification.mp3' hidden='true' autoplay='true' volume='0.5'/>";
echo "<script>document.getElementById('area').value = '';</script>";
}
}
?>
<?php include_once "../js/general.script.php"; ?>
Everything works, except that the Textarea won't clear itself, and no... I don't want to redirect anywhere nor do I want to refresh the page.
Thanks to everyone that can and will help me! :)

I'm not expert in PHP, but I think setting the textarea to null after passing the value to DB should works.
Or you shouldn't add the required="" inside the textarea tag?