We Keep Coding

Simplify my javascript click add/toggle/remove class

I am working on a section on my website where I need to toggle, add, and remove a class.
I have something that works really good but I was wondering if there is a simple solution to make my code better, organized, and much more readable than how it is now.
I have 4 buttons:
.info-button-left-1
.info-button-left-2
.info-button-right-1
.info-button-right-2
These buttons trigger a class to ad to the following divs:
.product-information-block-left-1
.product-information-block-left-2
.product-information-block-right-1
.product-information-block-right-2
And this is my code:
<?php
// Create id attribute allowing for custom "anchor" value.
$id = 'info-product-block-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'info-product-block';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
?>
<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> container-fluid">
<div class="row">
<div class="container">
<div class="row product-heading">
<div class="col">
<h2><?php echo the_field('product_heading'); ?></h2>
<?php echo the_field('product_content'); ?>
</div>
</div>
<div class="row product-information">
<div class="col-left-product">
<div class="left">
<div class="product-name"><?php echo the_field('product_name_left'); ?></div>
<div class="product-year"><?php echo the_field('product_year_left'); ?></div>
<div class="product-button">
<?php
$link = get_field('product_link_left');
if( $link ):
$link_url = $link['url'];
$link_title = $link['title'];
$link_target = $link['target'] ? $link['target'] : '_self';
?>
<a class="buy-button" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>
<?php endif; ?>
</div>
</div>
<div class="right">
<div class="product-image">
<div class="info-button-left-1"></div>
<div class="info-button-left-2"></div>
<?php
$image = get_field('product_image_left');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="product-information-block-left-1">
<?php echo the_field('product_content_left'); ?>
</div>
<div class="product-information-block-left-2">
<?php echo the_field('product_content_left'); ?>
</div>
</div>
</div>
<div class="col-right-product">
<div class="right">
<div class="product-image">
<div class="info-button-right-1"></div>
<div class="info-button-right-2"></div>
<?php
$image_right = get_field('product_image_right');
if( !empty( $image_right ) ): ?>
<img src="<?php echo esc_url($image_right['url']); ?>" alt="<?php echo esc_attr($image_right['alt']); ?>" />
<?php endif; ?>
</div>
<div class="product-information-block-right-1">
<?php echo the_field('product_content_left'); ?>
</div>
<div class="product-information-block-right-2">
<?php echo the_field('product_content_left'); ?>
</div>
</div>
<div class="left">
<div class="product-name"><?php echo the_field('product_name_right'); ?></div>
<div class="product-year"><?php echo the_field('product_year_right'); ?></div>
<div class="product-button">
<?php
$link_right = get_field('product_link_right');
if( $link_right ):
$link_right_url = $link_right['url'];
$link_right_title = $link_right['title'];
$link_right_target = $link_right['target'] ? $link_right['target'] : '_self';
?>
<a class="buy-button" href="<?php echo esc_url( $link_right_url ); ?>" target="<?php echo esc_attr( $link_right_target ); ?>"><?php echo esc_html( $link_right_title ); ?></a>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(".col-left-product .info-button-left-1").click(function() {
$(".product-information-block-left-1").toggleClass("active");
$(".product-information-block-left-2").removeClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-right-2").removeClass("active");
});
$(".col-left-product .info-button-left-2").click(function() {
$(".product-information-block-left-2").toggleClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-right-2").removeClass("active");
});
$(".col-right-product .info-button-right-1").click(function() {
$(".product-information-block-right-1").toggleClass("active");
$(".product-information-block-right-2").removeClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-left-2").removeClass("active");
});
$(".col-right-product .info-button-right-2").click(function() {
$(".product-information-block-right-2").toggleClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-left-2").removeClass("active");
});
</script>
</section>
I am learning more and more every day. but I do think that there is a better way to do this.
Is there anyone who can give me an answer or a path to follow?
Thank you in advance.

To make the JS more generic you can use common class names on the elements. Then you can relate them to each other by using DOM traversal methods, such as closest() and find() to target the required element by matching indexes. Something like this:
let $productInfoBlocks = $('.product-information-block');
$('.info-button').on('click', e => {
let $el = $(e.target);
let $targetInfoBlock = $el.closest('.col').find('.product-information-block').eq($el.index()).toggleClass('active');
$productInfoBlocks.not($targetInfoBlock).removeClass('active');
});
.active { color: #C00; }
<!-- Note: I reduced the HTML to the relevant elements only -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row product-information">
<div class="col col-left-product">
<div class="right">
<div class="product-image">
<div class="info-button">info-button-left-1</div>
<div class="info-button">info-button-left-2</div>
</div>
<div class="product-information-block">product-information-block-left-1</div>
<div class="product-information-block">product-information-block-left-2</div>
</div>
</div>
<div class="col col-right-product">
<div class="right">
<div class="product-image">
<div class="info-button">info-button-right-1</div>
<div class="info-button">info-button-right-2</div>
</div>
<div class="product-information-block">product-information-block-right-1</div>
<div class="product-information-block">product-information-block-right-2</div>
</div>
</div>
</div>

In similar case I used data attribute in combination with a general class name:
The general syntax for buttons:
<div class="info-button" data-place="left" data-targetId="1"></div>
The general code for target divs:
<div class="product-information-block" data-place="right" data-targetId="1">
<?php echo the_field('product_content_left'); ?>
</div>
The general code to handle all occurances:
$(".col-right-product .info-button").click(function() {
var place=$(this).data("place");
var targetId=$(this).data("targetId");
$(".product-information-block").removeClass("active");
$(".product-information-block[data-place='"+ place +"'][data-targetId='"+ targetId +"']").addClass("active");
});

How to populate the div with the response data from Ajax?

I have an Ajax post request which on success returns an array which I would like to load into a div. Now, doing this with single values is quite easy but with an array, I can't seem to find the right way to do it.
<fieldset id="div1" ondrop="remove_from_customer(event)" ondragover="allowDrop(event)">
<legend>Vacant parking spots</legend>
<?php $counter = 0;
echo count(get_free_parking_spots());
foreach (get_free_parking_spots() as $row) { ?>
<div id="count_id<?php echo $counter; ?>" data-parking_gate="<?php echo $row['parking_gate_id']; ?>" data-location_id="<?php echo $row['location_id']; ?>" data-spot_no="<?php echo $row['spot_no']; ?>" draggable="true" ondragstart="drag(event)">
<label><?php echo '' . $row['name'] . '' ?></label>
<label><?php echo '<p>Gate: ' . $row['parking_gate_id'] . '<p>Spot: ' . $row['spot_no'] . '' ?></label>
</div>
<?php $counter++;
} ?>
</fieldset>
<fieldset id="div2" ondrop="drop_to_customer(event)" ondragover="allowDrop(event)">
<legend>Current parking spots of the customer</legend>
<?php $count = 0;
echo count(get_customer_parking_spots($selected_user_id));
foreach (get_customer_parking_spots($selected_user_id) as $user) { ?>
<div id="count_idd<?php echo $count; ?>" data-customerid="<?php echo $user['customer_id']; ?>" data-gate_id="<?php echo $user['gate_id']; ?>" data-spot_id="<?php echo $user['spot_id']; ?>" data-location_id="<?php echo $user['location_id']; ?>" draggable="true" ondragstart="drag(event)">
<label><?php echo '' . $user['location_name'] . '' ?></label>
<label><?php echo '<p>Gate: ' . $user['gate_id'] . '<p>Spot: ' . $user['spot_id'] ?></label>
</div>
<?php $count++;
} ?>
</fieldset>
Ajax:
function drop_to_customer(ev) {
if (<?php echo count(get_customer_parking_spots($selected_user_id)); ?> < 3) {
const el = document.querySelector("[id=" + "\'" + ev.dataTransfer.getData("text") + "\'" + "]");
var add_location = "add location";
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
$.ajax({
type: 'post',
url: 'external_submit.php',
data: {
add_spot: add_location
},
success: function(html) {
$('#div1').html($('#div1', html).html()); //my failed attempt to reload data into the div here
}
});
}
}
As you can see when drop_to_customer() is called I am doing a post request and returning an array which I would like to load into the other div with id div1. The array is json_Encoded and it is returned successfully.
EDIT:
This is how I echo the array in PHP:
echo json_encode(array("array" => get_data($_POST['id']), "html" => $html))

How to make JavaScript dynamic?

I want to move document.getElementById("b") checked in a loop.Is it possible? How can I make it happen?
<img class="img-responsive pic" id="picture" src="images/step1.png">
<?php
//get rows query
$query = $db->query("SELECT * FROM `template_design` WHERE `panel` = 'front'");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$im_id = $row['id'];
$images = "images/" .$row['image']. "";
?>
<div class="col-md-4 col-sm-4 wel-grid wow fadeInDown">
<div class="wel11">
<input type="radio" id="<?php echo 'radio_'.$im_id; ?>" name="front" onClick="changeSrc(<?php echo $im_id; ?>)">
<label for="<?php echo 'radio_'.$im_id; ?>" style="font-size:12px; cursor: pointer;">
<img id="<?php echo 'picture_'.$im_id; ?>" style="border: 1px solid #ccc;" class="img-responsive" src="<?php echo $images; ?>"></label>
</div>
</div>
<?php } } ?>
<script type="text/javascript">
function changeSrc(id) {
if (document.getElementById("radio_"+id).checked) {
document.getElementById("picture_"+id).src = "images/Ppicture3.png";
}
}
</script>
I want to repeat it in a loop ,as fradio0 i.e $front will increment, JavaScript also repeat in a loop to match each.

You can pass parameters with your id for example:
<input type="radio" id="<?php echo 'radio_'.$im_id; ?>" name="<?php echo $fname; ?>" onClick="changeSrc(<?php echo $im_id; ?>)">
and use it on script like
<script type="text/javascript">
function changeSrc(id) {
if (document.getElementById("radio_"+id).checked) {
}
}
</script>

Please try this. Pass radio id as attr id & save each images by respective id's, followed by respective id.png. Also remove onclick function from your html code.
<script type="text/javascript">
$("input:radio[name=front]").click(function() {
var id= $(this).attr('id');
document.getElementById("picture").src = "panel/front/" + id + ".png";
});
</script>

JavaScript Form Cloning

I am trying to clone simple "directors / members" form. When I hit "add member button" it clones everything the form, but it does not erases zip code field. Also, when I submit the form it does not submit the first two fields of the cloned forms. It takes values of first name and last name and assigns it to address and city and so on... So, to summarize it does not send two fields, and I think it's state and zip fields of cloned forms that give me troubles, but I can't see why.
$y=0; $clone=1; do{ ?>
<div id="<?php echo "clonedSection$clone"; ?>" class="clonedSection" >
<p style="margin-left:350px; font-size: 14px;"><label id="<?php echo "member_label$clone"; ?>" > <?php echo "Director / Member $clone"; ?></label> </p><br><br>
<p style="margin-left:370px;">First name<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_firstname$clone"; ?>" id="<?php echo "member_firstname$clone"; ?>" value="<?php echo $split_members[$y][0];?>"> <span class="error"> <?php echo $member_errors[$y]["member_first_name"];?></span> </p>
<p style="margin-left:373px; ">Last name<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_lastname$clone"; ?>" id="<?php echo "member_lastname$clone"; ?>" value="<?php echo $split_members[$y][1];?>"> <span class="error"> <?php echo $member_errors[$y]["member_last_name"];?></span> </p>
<p style="margin-left:350px; ">Street address<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_address$clone"; ?>" id="<?php echo "member_address$clone"; ?>" value="<?php echo $split_members[$y][2];?>"> <span class="error"> <?php echo $member_errors[$y]["member_address"];?></span> </p>
<p style="margin-left:405px; ">City <input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_city$clone"; ?>" id="<?php echo "member_city$clone"; ?>" value="<?php echo $split_members[$y][3];?>"> <span class="error"> <?php echo $member_errors[$y]["member_city"];?></span> </p>
<p style="margin-left:402px;">State<select style="margin: 2px; margin-left: 5px; margin-right: 5px;" name="<?php echo "member_state$clone"; ?>" id ="<?php echo "member_state$clone"; ?>">
<?php //$states = listStates(statesList());
foreach($states as $value){
echo '<option >'.$value.'</option>';
} echo '<option selected>'.$split_members[$y][4].'</option>'; ?>
</select> <span class="error"> <?php echo $member_errors[$y]["member_state"];?></span> </p>
<p style="margin-left:384px;">ZIP code<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_zip$clone"; ?>" id="<?php echo "member_zip$clone"; ?>" value="<?php echo $split_members[$y][5];?>"> <span class="error"> <?php echo $member_errors[$y]["member_zip"];?></span> </p>
</div>
<?php $y++; $clone++; } while ($y < count($split_members)); ?>
And I use the following javascript:
$(document).ready(function() {
$("#btnAdd").click(function() {
$("#btnDel").prop("disabled",false);
var num = $(".clonedSection").length;
var newNum = new Number(num + 1);
var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
newSection.children(":nth-child(1)").children(":first").attr("id", "member_label" + newNum);
newSection.children(":nth-child(2)").children(":first").attr("name", "member_firstname" + newNum).attr("id", "member_firstname" + newNum).attr("value", "");
newSection.children(":nth-child(3)").children(":first").attr("name", "member_lastname" + newNum).attr("id", "member_lastname" + newNum).attr("value", "");
newSection.children(":nth-child(4)").children(":first").attr("name", "member_address" + newNum).attr("id", "member_address" + newNum).attr("value", "");
newSection.children(":nth-child(5)").children(":first").attr("name", "member_city" + newNum).attr("id", "member_city" + newNum).attr("value", "");
newSection.children(":nth-child(6)").children(":first").attr("name", "member_state" + newNum).attr("id", "member_state" + newNum).attr("value", "");
newSection.children(":nth-child(7)").children(":first").attr("name", "member_zip" + newNum).attr("id", "member_zip" + newNum).attr("value", "");
$(".clonedSection").last().append(newSection);
elem = document.getElementById('member_label' + newNum);
elem.innerHTML = "Director / Member " + newNum;
if (newNum == 12)
$("#btnAdd").prop("disabled",true);
});
$("#btnDel").click(function() {
var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
$("#clonedSection" + num).remove(); // remove the last element
// enable the "add" button
$("#btnAdd").prop("disabled",false);
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$("#btnDel").prop("disabled",true);
});
//$("#btnDel").attr("disabled","disabled");
$("#btnDel").prop("disabled",true);
var count = $(".clonedSection").length;
if (count > 1)
$("#btnDel").prop("disabled",false);
//$("#btnDel").disabled = false;
});

You're making it way more complex than needed.
If you have an input <input name="example[0]" /> and clone that, and try to make it <input name="example[1]" /> with weird increments and such, just use the array version:
<input name="example[]" value="My key will be 0" />
<input name="example[]" value="My key will be 1" />
<input name="example[]" value="My key will be 2" />
To use this again in php:
foreach($_POST['example'] as $key =>$value){
echo $key.': '.$value.'<br />';
echo $key.': '.$_POST['anotherName'][$key]; // (example for another variable)
}
As you can see, a lot less complicated and much easier to read and maintain. This way you can clone your form without having to worry about which number it is, you can easily loop through them.
If you aren't used to this, I still recommend to try this, maybe only in a small test setup. Controlling arrayed forms is a skill with a lot of value.

Auto calculation of div values on blur

I am generating a table of divs from mysql database with code as below :
<?php
$sql = "SELECT * FROM menuitem";
$result = mysql_query($sql); $i =1;
while ($row = mysql_fetch_array($result)) {?>
<div class="orderblock">
<div class="orderlist">
<div class="pimage">
<p></p>
</div>
<div class="pdesc">
<p><?php echo $row['prodname']; ?></p>
<p><?php echo substr($row['proddesc'], 0, 20); ?></p>
</div>
<div class="portion">
<input type="text" onblur="document.getElementById('tot<?php echo $i;?>').value=document.getElementById('por<?php echo $i;?>').value * document.getElementById('pri<?php echo $i;?>').value;" id="por<?php echo $i;?>" name="<?php echo $row['prodname']; ?>" >
</div>
<div class="price">
<p id="pri<?php echo $i;?>"><?php echo $row['price']; ?></p>
</div>
<div class="total">
<p><input style="border: none;" type="text" id="tot<?php echo $i;?>" disabled="disabled" value=""> </p>
</div>
</div>
</div>
<?php $i++; }
?>
this is my final code, finally I got it working but I am getting NaN as result could any please sort it for me.
thanks

Try this now. Before try this remove your blur event from html.I hope this will help you.
$(document).ready(function () {
$("input[type=text]").blur(function () {
var portion = $(this).val();
var price = $(this).parent().parent().find(".price p").text();
if(isNaN(portion)==false)
{
var tot = portion * price;
$(this).parent().parent().find(".total p input").val(tot);
}
else
{
$(this).parent().parent().find(".total p input").val(0);
}
});
});
Demo here