Develop Reference

Give different ID to each element in for loop in PhP

This is my output, clicking like button should add +1 to the likes column in MySQL .
I use a while loop to iterate buttons
For example, the "button" is displayed multiple times in the picture below. I have a tag in the while loop, so it outputs the button several times. And that name comes from the database.
MY Question. All the buttons in the will have the same ID. Currently, the user can only click the first button. I would like to give each element a different ID if possible. Then I would like to use jQuery to add a click event. So, if I click on the 4th button, the like count for that comment should be increased.
What I need.
How I can assign a different ID to each element in the far loop, so it does only make the first Image clickable but instead all elements' clickables?
<?php
$result = mysqli_query($link, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="single-item">
<div class="cmt_user"><div class="circle2">
<h5>
<?php
$name = $row['name'];
$f_letter = strtoupper($name[0]);
echo $f_letter;
?>
</h5>
</div>
<h4><?php echo $row['name']; ?></h4>
</div>
<p><?php echo $row['comment']; ?></p><div class="lcr">
<ul>
<li id = "modified" > </li>
</ul>
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="POST" class="form">
<button onclick="imageClick(<?php echo $row['id_vnr']; ?>)" name="like" value="<?php echo $row['id'] ?>" class="like_btn"><i class="fa fa-heart"></i> Like</button>
</form>
this is Php Code to insert likes count
<?php
$like = $_POST['like'];
if($like){
$sql = "UPDATE comments set likes = likes + 1 where id = '".$row['id']."'";
echo $sql;
$result=mysqli_query($link,$sql);
}
?>

It's really simple. do it like this
$result = mysqli_query($link, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="single-item">
<div class="cmt_user"><div class="circle2">
<h5>
<?php
$name = $row['name'];
$f_letter = strtoupper($name[0]);
echo $f_letter;
?>
</h5>
</div>
<h4><?php echo $row['name']; ?></h4>
</div>
<p><?php echo $row['comment']; ?></p><div class="lcr">
<ul>
<li id = "modified" > </li>
</ul>
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="POST" class="form">
<input name="like" value="1">
<input name="row_id" value="<?php echo $row['id'] ?>">
<button class="like_btn"><i class="fa fa-heart"></i> Like</button>
</form>
And get POST values like this
<?php
$like = $_POST['like'];
$row_id = $_POST['row_id'];
if(isset($like) && $like == 1){
$sql = "UPDATE comments set likes = likes + 1 where id = '".$row_id."'";
echo $sql;
$result=mysqli_query($link,$sql);
}
?>

How to auto-scroll to specific element using JavaScript

I'm creating simple quiz plugin, but now I'm in dilemma, because don't have an idea how to make options to auto-scroll to the top of the Explanation Box after visitor choose an answer (right or wrong, explanation box is same with same content. Note - explainer box is hidden until visitor clicks with mouse on checkbox of any offered answer.
Below is JavaScript code I have so far:
var wpvqgr = wpvqgr || {};
(function($)
{
$(document).ready(function()
{
wpvqgr.selectAnswer = function($question, question_id, $answer, answer_id)
{
// Don't let the user play twice the same question!
if ($answer.hasClass('wpvqgr-disabled-answer') && !wpvqgr.vars.quiz.settings.trivia_hiderightwrong) {
return;
}
// Right or wrong?
var rightAnswers = wpvqgr.getRightAnswers(question_id);
var isRight = (rightAnswers.indexOf(answer_id) > -1);
// Store data
var _answers = wpvqgr.getStore('answers') || { 'questions' : [] };
_answers.questions[question_id] = {
'answer_id' : answer_id,
'isRight' : isRight,
'rightAnswers' : rightAnswers,
};
wpvqgr.setStore('answers', _answers);
// Display Right or Wrong answers
if (wpvqgr.vars.quiz.settings.trivia_hiderightwrong != 'yes')
{
// First, disable every answers
$question.find('.wpvqgr-answer').removeClass('wpvqgr-selected-answer').addClass('wpvqgr-disabled-answer');
// Add explanation
var $explanation = $question.find('div.wpvqgr-explanation');
$explanation.find('div.wpvqgr-explanation-content').html(wpvqgr.vars.quiz.questions[question_id].wpvqgr_quiz_questions_explanation);
if (isRight)
{
$explanation.find('h3.wpvqgr-thats-right').show();
$answer.addClass('wpvqgr-right-answer');
}
else
{
$explanation.find('h3.wpvqgr-thats-wrong').show();
$answer.addClass('wpvqgr-wrong-answer');
$.each(rightAnswers, function(index, answer_id){
$question.find('.wpvqgr-answer[data-id=' + answer_id + ']').addClass('wpvqgr-right-answer');
});
}
$explanation.show();
}
else
{
$question.find('.wpvqgr-answer').removeClass('wpvqgr-selected-answer');
$answer.addClass('wpvqgr-selected-answer');
}
// Update visual checkbox
$question.find('div.wpvqgr-checkbox-picture').removeClass('wpvqgr-checkbox-checked-picture');
$answer.find('div.wpvqgr-checkbox-picture').addClass('wpvqgr-checkbox-checked-picture');
// Not a visual class, just marked as
$answer.addClass('wpvqgr-is-selected-answer');
};
wpvqgr.computeResults = function()
{
var answers = wpvqgr.getStore('answers') || { 'questions' : [] };
var finalScore = 0;
// Score
$.each(answers.questions, function (q_id, answer_data) {
if (answer_data.isRight) {
finalScore++;
}
});
// Appreciation
var appreciation = wpvqgr.getAppreciation(finalScore);
// Store global data for Facebook, page refresh and other stuff
wpvqgr.setStore('finalScore', finalScore);
wpvqgr.setStore('appreciation', appreciation);
};
//Autoscroll
/**
* Integrate results in view
* #return {[type]} [description]
*/
wpvqgr.integrateResults = function ()
{
wpvqgr.parseResults('quizname', wpvqgr.vars.quiz.general.name);
wpvqgr.parseResults('score', wpvqgr.getStore('finalScore'));
wpvqgr.parseResults('total', wpvqgr.getStore('answers').questions.length);
wpvqgr.parseResults('description', wpvqgr.getStore('appreciation').content);
}
wpvqgr.getAppreciation = function(score)
{
var finalAppreciationId = -1;
var finalAppreciationScoreStep = 9999;
$.each(wpvqgr.vars.quiz.appreciations, function (ap_id, data)
{
var app_score = parseInt(data.score);
if (score <= app_score && finalAppreciationScoreStep > app_score)
{
finalAppreciationScoreStep = app_score;
finalAppreciationId = ap_id;
}
});
// No appreciation found!
if (finalAppreciationId == -1) {
return { 'content':'', 'redirect':'', 'picture':'', 'score':-1 }
} else {
return wpvqgr.vars.quiz.appreciations[finalAppreciationId];
}
};
wpvqgr.getRightAnswers = function(question_id)
{
var rightAnswers = [];
var answers = wpvqgr.vars.quiz.questions[question_id]['wpvqgr_quiz_questions_answers'];
$.each(answers, function(id, data) {
if (data['wpvqgr_quiz_questions_answers_right']) {
rightAnswers.push(id);
}
});
return rightAnswers;
};
wpvqgr.getFinalScore = function()
{
return wpvqgr.getStore('finalScore');
};
});
})(jQuery);
/**
* Store
*
* questions[$id] = $answer_id
*
*
*
*/
<?php global $wpvqgr_quiz, $wpvqgr_quiz_columns, $wpvqgr_resources_dir_url, $wpvqgr_skin_dir_url; ?>
<!-- Load CSS Skin Theme -->
<style> #import url('<?php echo $wpvqgr_resources_dir_url . 'css/bootstrap-wrapper.css'; ?>'); </style>
<style> #import url('<?php echo $wpvqgr_resources_dir_url . 'icons/fa/css/font-awesome.min.css'; ?>'); </style>
<style> #import url('<?php echo $wpvqgr_resources_dir_url . 'css/fo-style.css'; ?>'); </style>
<style> #import url('<?php echo $wpvqgr_skin_dir_url . 'style.css'; ?>'); </style>
<!-- Custom style -->
<style>
<?php if ($wpvqgr_quiz->getSetting('progessbarcolor') != ''): ?>
.wpvqgr-wrapper button.wpvqgr-button.wpvqgr-playagain,
.wpvqgr-wrapper button.wpvqgr-button.wpvqgr-start-button,
.wpvqgr-wrapper div.wpvqgr-continue button.wpvqgr-button,
.wpvqgr-wrapper button.wpvqgr-button.wpvqgr-askinfo-submit,
.wpvqgr-progress .progress-bar {
background-color:<?php echo $wpvqgr_quiz->getSetting('progessbarcolor'); ?>;
}
<?php endif; ?>
<?php echo $wpvqgr_quiz->getSetting('global_custom_css'); ?>
</style>
<!-- Facebook SDK -->
<script type="text/javascript">
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- / Prepare sharing options -->
<?php echo apply_filters('wpvqgr_public_version', "<!-- Quiz Created with WP Viral Quiz (v".WPVQGR_VERSION.") - https://www.ohmyquiz.io/discover -->"); ?>
<a name="wpvqgr"></a>
<div class="wpvqgr-wrapper">
<div class="container-fluid">
<?php if ($wpvqgr_quiz->getSetting('startbutton') && !$wpvqgr_resultsOnly): ?>
<div class="wpvqgr-intro">
<?php if ($wpvqgr_quiz->getSetting('startbuttonintro')): ?>
<p><?php echo $wpvqgr_quiz->getSetting('startbuttonintro'); ?></p>
<?php endif ?>
<button class="wpvqgr-start-button wpvqgr-button"><?php echo $wpvqgr_quiz->getSetting('customlabel_startbutton'); ?></button>
</div>
<?php endif ?>
<div id="wpvqgr-<?php echo $wpvqgr_quiz->getId(); ?>" class="wpvqgr <?php echo $wpvqgr_quiz->getType(); ?>">
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_before')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_before')); ?>
</div>
<?php if ($wpvqgr_quiz->getPageCounter() > 1 && in_array('top', $wpvqgr_quiz->getSetting('progessbar'))): ?>
<!-- Progress bar -->
<div class="wpvqgr-progress wpvqgr-progress-top progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<?php endif ?>
<?php if (!$wpvqgr_resultsOnly): ?>
<div class="wpvqgr-page-0 wpvqgr-page" data-id="0">
<?php
$wpvqgr_questions = $wpvqgr_quiz->getQuestionsAndBlocks();
$q_real_id = -1;
foreach($wpvqgr_questions as $q_id => $question):
// Type and content
$q_type = $question['_type'];
$q_content = ($q_type == 'wpvqgr_quiz_htmlblocks') ? $question['wpvqgr_quiz_htmlblocks_content'] : $question['wpvqgr_quiz_questions_content'];
// Real ID (ignore HTML blocks)
if ($q_type == 'wpvqgr_quiz_questions') {
$q_real_id++;
}
// Pagination
$q_isTherePage = ($question['wpvqgr_quiz_questions_addpage'] && isset($wpvqgr_questions[$q_id+1]));
$currentPage_id = (!isset($currentPage_id)) ? 0 : $currentPage_id;
// Picture
if ($q_type == 'wpvqgr_quiz_questions') {
$q_picture_id = $question['wpvqgr_quiz_questions_picture'];
$q_picture_info = WPVQGR_Snippets::wpGetAttachment($q_picture_id);
$q_picture_url = wp_get_attachment_url($q_picture_id);
}
?>
<div class="row">
<div class="col-sm-12">
<!-- Global ads between questions -->
<?php if ( $q_real_id > 0 && $wpvqgr_quiz->getSetting('global_ads_between_count') > 0 && ($q_real_id % $wpvqgr_quiz->getSetting('global_ads_between_count') == 0) ): ?>
<?php echo $wpvqgr_quiz->getSetting('global_ads_between_content'); ?>
<?php endif; ?>
<!-- HTML Blocks -->
<?php if ($q_type == 'wpvqgr_quiz_htmlblocks'): ?>
<div class="wpvqgr-htmlblock">
<?php echo do_shortcode($q_content); ?>
</div>
<?php else: ?>
<!-- Regular question -->
<div class="wpvqgr-question" data-id="<?php echo $q_real_id; ?>">
<div class="wpvqgr-question-label"><?php echo do_shortcode(nl2br($q_content)); ?></div>
<?php if (is_numeric($q_picture_id)): ?>
<div class="wpvqgr-question-picture">
<figure class="figure">
<img src="<?php echo $q_picture_url; ?>" class="figure-img img-fluid" alt="<?php echo htmlentities($q_picture_info['alt']); ?>" />
<?php if ($q_picture_info['caption'] != ''): ?>
<figcaption class="figure-caption"><?php echo $q_picture_info['caption']; ?></figcaption>
<?php endif; ?>
</figure>
<?php if (function_exists ('adinserter')) echo adinserter (1); ?> <!-- / First Add Code -->
</div>
<?php endif ?>
<div class="row">
<?php
$smartColumns = WPVQGR_Snippets::getSmartColumnsSize($question, $wpvqgr_quiz_columns);
foreach ($question['wpvqgr_quiz_questions_answers'] as $a_id => $answer):
// Answer
$a_label = $answer['wpvqgr_quiz_questions_answers_answer'];
// Picture
if ($smartColumns['displayPicture'])
{
$a_picture_id = $answer['wpvqgr_quiz_questions_answers_picture'];
if ($a_picture_id == 0) {
$a_picture_info = array('alt' => '', 'caption' => '');
$a_picture_url = WPVQGR_PLUGIN_URL . '/resources/images/picture-placeholder.jpg';
} else {
$a_picture_info = WPVQGR_Snippets::wpGetAttachment($a_picture_id);
$a_picture_url = wp_get_attachment_image_src($a_picture_id, 'wpvqgr-square-answer');
$a_picture_url = $a_picture_url[0];
}
}
?>
<div class="wpvqgr-answer-col col-xs-<?php echo $smartColumns['xs-size']; ?> col-md-<?php echo $smartColumns['md-size']; ?>">
<div class="wpvqgr-answer" data-id="<?php echo $a_id; ?>">
<?php if ($wpvqgr_quiz->getType() == 'wpvqgr_quiz_perso'): ?>
<!-- Multipliers -->
<?php foreach ($answer['wpvqgr_quiz_questions_answers_multipliers'] as $p_id => $value): ?>
<input type="hidden" name="wpvqgr_answer_multipliers[]" data-pid="<?php echo (int)$p_id; ?>" value="<?php echo (int)$value; ?>" />
<?php endforeach ?>
<?php endif; ?>
<?php if ($smartColumns['displayPicture']): ?>
<div class="wpvqgr-answer-picture">
<figure class="figure">
<img src="<?php echo $a_picture_url; ?>" class="figure-img img-fluid" alt="<?php echo htmlentities($a_picture_info['alt']); ?>" />
<?php if ($a_picture_info['caption'] != ''): ?>
<figcaption class="figure-caption"><?php echo $a_picture_info['caption']; ?></figcaption>
<?php endif; ?>
</figure>
</div>
<?php endif ?>
<?php if ($a_label != ''): ?>
<div class="wpvqgr-checkbox">
<div class="wpvqgr-checkbox-picture wpvqgr-checkbox-unchecked-picture"></div>
<span class="wpvqgr-answer-label"><?php echo do_shortcode(stripslashes($a_label)); ?></span>
<hr class="wpvqgr-clear" />
</div>
<?php endif ?>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="row"><div class="col-sm-12">
<div class="wpvqgr-explanation">
<center><h6>⇩ SCROLL DOWN TO CONTINUE ⇩</h6></center>
<h3 class="wpvqgr-thats-right"><?php echo $wpvqgr_quiz->getSetting('customlabel_right'); ?></h3>
<h3 class="wpvqgr-thats-wrong"><?php echo $wpvqgr_quiz->getSetting('customlabel_wrong'); ?></h3>
<div class="wpvqgr-explanation-content"></div>
</div>
</div>
</div>
</div> <!-- .question -->
<?php endif; ?>
</div> <!-- / col -->
</div> <!-- / row -->
<div class="autoscroll>">
</div>
<div class="wpvqgr-continue">
<?php if (function_exists ('adinserter')) echo adinserter (2); ?> <!-- / Second Add Code -->
<button class="wpvqgr-button" style="background:<?php echo $wpvqgr_quiz->getSetting('progessbarcolor'); ?>;">
<?php echo $wpvqgr_quiz->getSetting('customlabel_continuebutton'); ?>
</button>
</div>
<?php
if ($q_isTherePage): $currentPage_id++;
?>
</div> <!-- close previous page -->
<div class="wpvqgr-page-<?php echo $currentPage_id; ?> wpvqgr-page" data-id="<?php echo $currentPage_id; ?>">
<?php endif ?>
<?php endforeach; ?>
</div> <!-- Final page close -->
<?php endif; ?>
<a id="wpvqgr-resultarea"></a>
<!-- Force to share -->
<div class="row">
<div class="col-xs-12 col-md-10 offset-md-1">
<div class="wpvqgr-forcetoshare">
<h3><?php echo __("Share the quiz to show your results !", 'wpvq'); ?></h3>
<button class="wpvqgr-button wpvqgr-social-facebook wpvqgr-force-share" data-title="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_title'); ?>" data-description="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_description'); ?>"><i class="fa fa-facebook-square" aria-hidden="true"></i> <?php echo __('Share on Facebook', 'wpvq'); ?></button>
</div>
</div>
</div>
<!-- Force to give some informations -->
<div class="row">
<div class="col-xs-12 col-md-10 offset-md-1">
<div class="wpvqgr-askinfo">
<h3><?php echo $wpvqgr_quiz->getSetting('customlabel_askinfotitle'); ?></h3>
<form action="" method="GET">
<?php foreach($wpvqgr_quiz->getSetting('askinfo_fields') as $field): ?>
<?php
$field_slug = WPVQGR_Snippets::slugify($field['wpvqgr_settings_askinfo_fields_field_label']);
$is_required_field = ($field['wpvqgr_settings_askinfo_fields_field_optional'] != 'yes');
?>
<div class="form-group">
<label for="wpvqgr-<?php echo $field_slug; ?>"><?php echo $field['wpvqgr_settings_askinfo_fields_field_label']; ?></label>
<input type="<?php echo $field['wpvqgr_settings_askinfo_fields_field_type']; ?>" class="form-control" name="<?php echo $field_slug; ?>" id="wpvqgr-<?php echo $field_slug; ?>" <?php if($is_required_field): ?>required="true"<?php endif; ?>/>
</div>
<?php endforeach; ?>
<?php if ($wpvqgr_quiz->getSetting('global_gdpr_enabled') == 1): ?>
<div class="form-check gdpr-area">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="wpvq_gpdr" id="wpvq_gpdr_checkbox" required="true" />
<?php echo $wpvqgr_quiz->getSetting('global_gdpr_message'); ?>
</label>
</div>
<?php endif ?>
<div class="form-group" style="text-align:center;">
<button type="submit" class="wpvqgr-button wpvqgr-askinfo-submit"><?php echo $wpvqgr_quiz->getSetting('customlabel_askinfobutton'); ?></button>
</div>
</form>
<?php if ($wpvqgr_quiz->getSetting('askinfo_ignore')): ?>
<p class="wpvqgr-askinfo-ignore"><?php echo $wpvqgr_quiz->getSetting('customlabel_askinfoignore'); ?></p>
<?php endif ?>
</div>
</div>
</div>
<!-- Show results -->
<div class="row">
<div class="col-sm-12">
<div class="wpvqgr-results">
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_aboveresults')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_aboveresults')); ?>
</div>
<div class="wpvqgr-results-box <?php echo $wpvqgr_quiz->getType(); ?>">
<div class="wpvqgr-top-result">
<div class="wpvqgr-quiz-name"><?php echo stripslashes($wpvqgr_quiz->getName()); ?></div>
<h3><?php echo $wpvqgr_quiz->getSetting('global_template_result'); ?></h3>
<div class="wpvqgr-result-description">%%description%%</div>
</div>
<div class="wpvqgr-additional-results">
<div class="wpvqgr-additional-results-template">
<h3><?php echo $wpvqgr_quiz->getSetting('global_template_additional_results'); ?></h3>
<div class="wpvqgr-result-description">%%description%%</div>
</div>
</div>
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_afterresults')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_afterresults')); ?>
</div>
<?php if ($wpvqgr_quiz->getSetting('displaysharing')): ?>
<div class="wpvqgr-sharing">
<?php if (!in_array('facebook', $wpvqgr_quiz->getSetting('global_socialmedia_hide'))): ?>
<button class="wpvqgr-button wpvqgr-social-facebook" data-title="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_title'); ?>" data-description="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_description'); ?>"><i class="fa fa-facebook-square" aria-hidden="true"></i> <?php echo __('Share on Facebook', 'wpvq'); ?></button>
<?php endif; ?>
<!-- Twitter -->
<?php if (!in_array('twitter', $wpvqgr_quiz->getSetting('global_socialmedia_hide'))): ?>
<button class="wpvqgr-button wpvqgr-social-twitter" data-tweet="<?php echo $wpvqgr_quiz->getSetting('global_template_twitter'); ?>" data-mention="<?php echo $wpvqgr_quiz->getSetting('twittermention'); ?>" data-hashtag="<?php echo $wpvqgr_quiz->getSetting('twitterhashtag'); ?>"><i class="fa fa-twitter-square" aria-hidden="true"></i> <?php echo __('Share on Twitter', 'wpvq'); ?></button>
<?php endif ?>
<!-- VK -->
<?php if (!in_array('vk', $wpvqgr_quiz->getSetting('global_socialmedia_hide'))): ?>
<button class="wpvqgr-button wpvqgr-social-vk" data-title="<?php echo $wpvqgr_quiz->getSetting('global_template_vk_title'); ?>" data-description="<?php echo $wpvqgr_quiz->getSetting('global_template_vk_description'); ?>"><i class="fa fa-vk" aria-hidden="true"></i> <?php echo __('Share on VK', 'wpvq'); ?></button>
<?php endif ?>
</div>
<?php endif; ?>
</div>
<?php if ($wpvqgr_quiz->getSetting('playagain')): ?>
<button class="wpvqgr-button wpvqgr-playagain"><?php echo $wpvqgr_quiz->getSetting('customlabel_playagainbutton'); ?></button>
<?php endif; ?>
</div>
</div>
</div>
<?php if ($wpvqgr_quiz->getPageCounter() > 1 && in_array('bottom', $wpvqgr_quiz->getSetting('progessbar'))): ?>
<!-- Progress bar -->
<div class="wpvqgr-progress wpvqgr-progress-bottom progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<?php endif ?>
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_after')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_after')); ?>
</div>
<?php if ($wpvqgr_quiz->getSetting('promote')): ?>
<div class="wpvqgr-promote">
<p>
<?php _e("This quiz has been created with", 'wpvq'); ?> WordPress Viral Quiz
</p>
</div>
<?php endif; ?>
</div> <!-- / #wpvqgr -->
</div> <!-- / container -->
<!-- Loading -->
<div class="row">
<div class="wpvqgr-loader">
<p>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only"><?php _e("Loading...", 'wpvq'); ?></span>
</p>
</div>
</div>
</div> <!-- / Bootstrap wrapper -->
I tried with dummy DIV element, but without success (to have it as an anchor, because explainer element is invisible).
Code samples I tried so far are:
$('wpvqgr-answer').click(function() {
$('html,body').animate({scrollTop: ('#autoscroll').offset().top - staticHeaderHeight}, 'slow');
return true;
});
And:
$('.wpvqgr-answer').click(function () {
$("html, body").animate({ scrollTop: $(el).closest(':visible').offset().top}, 400);
return true;
});
And, this was desperate act of self destruction:
$('.wpvqgr-answer').click(() => {
$('.wpvqgr-explanation').toggle('smooth', () => {
$('.wpvqgr-explanation').get(0).scrollIntoView();
});
});
I hope you have some kind of overview now, even in basic sense. Any guidance appreciated. Thank you
EDIT: Box creation conditions are within JS and parsed to HTML code, example below:
// Add explanation
var $explanation = $question.find('div.wpvqgr-explanation');
$explanation.find('div.wpvqgr-explanation-content').html(wpvqgr.vars.quiz.questions[question_id].wpvqgr_quiz_questions_explanation);
if (isRight)
{
$explanation.find('h3.wpvqgr-thats-right').show();
$answer.addClass('wpvqgr-right-answer');
}
else
{
$explanation.find('h3.wpvqgr-thats-wrong').show();
$answer.addClass('wpvqgr-wrong-answer');
$.each(rightAnswers, function(index, answer_id){
$question.find('.wpvqgr-answer[data-id=' + answer_id + ']').addClass('wpvqgr-right-answer');
});
}
$explanation.show();
}
else
{
$question.find('.wpvqgr-answer').removeClass('wpvqgr-selected-answer');
$answer.addClass('wpvqgr-selected-answer');
}
<div class="row"><div class="col-sm-12">
<div class="wpvqgr-explanation">
<center><h6>⇩ SCROLL DOWN TO CONTINUE ⇩</h6></center>
<h3 class="wpvqgr-thats-right"><?php echo $wpvqgr_quiz->getSetting('customlabel_right'); ?></h3>
<h3 class="wpvqgr-thats-wrong"><?php echo $wpvqgr_quiz->getSetting('customlabel_wrong'); ?></h3>
<div class="wpvqgr-explanation-content"></div>
</div>
</div>
</div>

Simple piece of code worked as charm for me, just enough to achieve functionality and in the same time not to complicate too much:
const goToTop = () => window.scrollTo(0, 950);
goToTop();
This is very quick and "clean" solution for one who does not need complicated function.

Pick items from while loop php

For a school project I have to make a simple webshop.
To display my featured products on the hopepage I used a while loop. But now I want to add a shoppingcart. So after you pressed the button add to cart the right data has to be picked and display on another page. I will do that with cookies. So all I need is to get the right data in a variable.
I tried to use the result right away but that didn't work.
<?php
$sql = "SELECT * FROM product WHERE featured = 1 AND nr_available > 0";
$resultquery = $conn->query($sql);
?>
<div class="preview">
<?php while ($result = mysqli_fetch_assoc($resultquery)) : ?>
<div class="productpreview">
<div class="previewheader">
<img src="images/products/<?=$result['picture']; ?>" class="previewimg" style="max-width: 300px;">
</div>
<div class="description">
<h2><?=$result['title']; ?></h2>
<p><?=$result['description']; ?></p>
<p>Size: <?=$result['size']; ?></p>
<p>Price: € <?=$result['price']; ?></p>
<button class="add" onclick="window.location.href='buy.php'">Buy</button>
<button class="add" onclick="window.location.href='shoppingcart.php'">Add to cart</button>
</div>
</div>
<?php endwhile; ?>
</div>
I want to store the right data in variables which I can display on another page.

I have tried this:
<?php
$sql = "SELECT * FROM product WHERE featured = 1 AND nr_available > 0";
$resultquery = $conn->query($sql);
?>
<div class="preview">
<?php while ($result = mysqli_fetch_assoc($resultquery)) : ?>
<div class="productpreview">
<div class="previewheader">
<img src="images/products/<?=$result['picture']; ?>" class="previewimg" style="max-width: 300px;">
</div>
<div class="description">
<h2><?=$result['title']; ?></h2>
<p><?=$result['description']; ?></p>
<p>Size: <?=$result['size']; ?></p>
<p>Price: € <?=$result['price']; ?></p>
<button class="add" onclick="window.location.href='buy.php'">Buy</button>
<button class="add" onclick="window.location.href='shoppingcart.php/id=<?=$result['product_id']; ?>'">Add to cart</button>
</div>
</div>
<?php endwhile; ?>
</div>
and this is the page where I want to show the user his shoppingcart data.
<?php
include "core/core.php";
include "parts/head.php";
include "parts/navbar.php";
include "core/helpers.php";
if ($_SESSION['loggedIn'] == 'true') {
echo "welkom";
$productid = $_GET['product_id'];
$sql = "SELECT * FROM product WHERE id = '$productid'";
$query = $conn->query($sql);
$result = mysqli_fetch_assoc($query);
} else {
echo "log in ";
}
?>
<h1>Your cart</h1>
<p><?=$result['title']; ?></p>
<?php
include "parts/footer.php";
?>
for some reason this doesn't work. I have no errors.

Multiple Weight based Pricing for a product in codeigniter using ajax

I have made a shopping cart website using ajax and Codeigniter. The products is added to cart without the page load when the button add to cart is clicked. I was displaying single net weight for the product, but now i have changed it to multiple netweight for the same product. but add to cart is not working for the product which has multiple netweight. because i am not getting the logic to send the data of a selected dropdown list.
<section class="regular slider">
<?php
foreach($todays_offers as $offer)
{
if(!empty($offer))
{
$product_id=$offer->id;
$product_name=$offer->product_name;
$image=$offer->image;
$price=$offer->mrp;
$our_price=$offer->retail_price;
$brand=$offer->brand;
$pro_quantity=$offer->stock;
$gst=$offer->gst;
$stock=$offer->stock;
}
?>
<div class="product-container col-xs-12" style="">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#">
<img src='<?php echo base_url("images/$image")?> ' alt="<?php echo $product_name?>" >
</a>
</div>
</div>
<div class="product-right">
<div class="product-brand ">
<?php echo ucfirst($brand); ?>
</div>
<div class="product-name " style="height: 40px;overflow: hidden;line-height:17px;">
<?php echo $product_name ?>
</div>
<?php
$sql ="SELECT * FROM materials where product_name='".$product_name."' ORDER BY retail_price ASC";
$query1 = $this->db->query($sql);
$rowCount="SELECT * FROM materials where product_name='$product_name'";
$query2 = $this->db->query($rowCount);
if (!empty($query1))
{
if ($query2->num_rows() > 1)
{
echo "<select name='netweight' id='netweight' onchange='ItemSelected(this)'>";
foreach ($query1->result() as $row)
{
$net = $row->packing;
$retail_price = $row->retail_price;
?>
<option id="<?php echo $row->id;?>" value="<?php echo $net;?>" ><?php echo $net .' - Rs. '. $retail_price?> </option>
<?php
}
echo "</select>";
}
else
{
$net_weight=$offer->packing;
echo "<span>$net_weight</span>";
}
}
?>
<div class="price-box">
<span class="product-price"> <i class="fa fa-inr" aria-hidden="true"></i> <?php echo $our_price ?></span>
<?php
if($our_price<$price)
{
?>
<span class="product-price-old">MRP <i class="fa fa-inr" aria-hidden="true"></i><?php echo $price ?></span>
<?php
}
?>
</div>
<div class="col-sm-5 col-xs-4 pad-0"> <input type="number" value="1" min="1" max="10" name="quantity" class="form-control quantity" id="<?php echo $product_id ?>" /></div>
<div class="col-sm-5 col-xs-5 pad-0">
<div class="product-button">
<?php
if($pro_quantity>0)
{
?>
<a class="button-radius btn-add-cart add_cart" type="button" title="Add to Cart" name="add_cart" data-netweight="<?php echo $net_weight ?>" data-image="<?php echo $image ?>" data-productname= "<?php echo $product_name ?>" data-price="<?php echo $price?>" data-productid="<?php echo $product_id ?>" data-brand="<?php echo $brand ?>"data-gst="<?php echo $gst ?>" data-stock="<?php echo $stock ?>" >add<span class="icon"></span></a>
<?php
}
else
{
echo "<span class='label label-danger'>Out of stock</span>";
}
?>
</div>
</div>
</div>
</div>
<?php
}
?>
</section>
ajax code
$('.add_cart').click(function() {
var product_id = $(this).data("productid");
var product_name = $(this).data("productname");
var product_price = $(this).data("price");
var net = $(this).closest(".netweight").val();
alert(net);
var image=$(this).data("image");
var brand=$(this).data("brand");
var gst=$(this).data("gst");
var stock=$(this).data("stock");
var quantity = $('#' + product_id).val();
if(quantity != '' && quantity > 0)
{
$.ajax({
url:"<?php echo base_url(); ?>shopping_cart/add",
method:"POST",
data:{product_id:product_id, product_name:product_name, product_price:product_price, quantity:quantity,net:net,image:image,brand:brand,gst:gst,stock:stock },
success:function(data)
{
$.alert(product_name, {
title: 'Success product is added to cart',
closeTime: 6 * 1000,
autoClose: true,
});
$('#cart_details').html(data);
$('#' + product_id).val(1);
}
});
}
else
{
alert("Please Enter quantity");
}
});
I just want send the selected data with id to the cart

Your problem is, you dont pick up the value from your selected option and you dont set a value at all.
You should post your entire list item partial here - because i need the ancestor of the select element netweight
a possible solution could be :
add a value field to your option element like (be aware - i don't know your desired value, so i took $row->net instead)
<option id="<?php echo $row->id; ?>" value="<?=$row->net; ?>">
<?php echo $net .' - Rs. '. $retail_price?>
</option>
and of course in your js function you have to change your net Variable accordingly $(this).closest(".netweight").val() might not work - because i need the correct ancestor - so pls post your entire view here.
$('.add_cart').click(function ()
{
var product_id = $(this).data("productid");
var product_name = $(this).data("productname");
var product_price = $(this).data("price");
var net = $(this).closest(".product-right").find(".netweight").val();
var image = $(this).data("image");
var brand = $(this).data("brand");
var gst = $(this).data("gst");
var stock = $(this).data("stock");
var quantity = $('#' + product_id).val();
if (quantity != '' && quantity > 0)
{
$.ajax({
url: "<?php echo base_url(); ?>shopping_cart/add",
method: "POST",
data: {product_id: product_id, product_name: product_name, product_price: product_price, quantity: quantity, net: net, image: image, brand: brand, gst: gst, stock: stock},
success: function (data)
{
$.alert(product_name, {
title: 'Success product is added to cart',
closeTime: 6 * 1000,
autoClose: true,
});
$('#cart_details').html(data);
$('#' + product_id).val(1);
}
});
}
else
{
alert("Please Enter quantity");
}
});

Can't pass target ID in hide/show function

I have a "read more about supplier" displayed on each productarticle. When you click it, it's supposed to pop-up a small box with information about the supplier.
The code is working, but when you click the text it only toggles the productarticle on the top of the page. It looks like it can't seperate them and give them each a unique ID. I have no idea how to do this as I'm an amateur. Any help please?
HTML:
<div class="popup" onclick="myFunction1()" style="position:relative; left:
70px;">Read more about <?php echo $supplier ?> here
<span class="popuptext" id="myPopup">
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier1') !== false) { echo 'Supplier 1 description'; } ?></b>
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier2') !== false) { echo 'Supplier 2 description'; } ?></b>
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier3') !== false) { echo 'Supplier 3 description'; } ?></b>
</span>
</div>
js:
function myFunction1() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
the loop including all products:
<?php $hr='';?>
<div class="row">
<ul class="listProductItems clearfix">
<?php for ($art=0; $art<count($articles); $art++){ ?>
<?php $imagine =$this->site_model->show_thumbs($articles[$art]['LA_ART_ID']); ?>
<?php $supplier =(($articles[$art]['producer']!==NULL) ? $articles[$art]['producer'] : $articles[$art]['SUP_BRAND']); ?>
<?php //$criteria =$this->site_model->article_criteria($articles[$art]['LA_ART_ID'],$articles[$art]['ga_id']); ?>
<?php $criteria =$this->site_model->article_criteria_filter($articles[$art]['la_id']); ?>
<?php $criteria .=$this->site_model->article_criteria($articles[$art]['LA_ART_ID'],$articles[$art]['ga_id']); ?>
<?php if ($hr !== $articles[$art]['generic_name'].' PRODUCED BY '.$supplier){ ?>
<div class="clearfix"></div>
<?php $hr = $articles[$art]['generic_name'].' PRODUCED BY '.$supplier; ?>
<?php } ?>
<li class="clearfix">
<div class="span4" style="max-height:50px">
<?php if (isset($imagine)){ ?>
<div class="thumbnail"><?php echo $imagine; ?></div>
<?php } else { ?>
<div class="thumbnail"><a href="<?php echo site_url('type/'.$versiune.'/category/'.$tree.'/article/'.$articles[$art]['la_id']); ?>">