We Keep Coding

Select all checkboxes by group in laravel 8

I want to make select all but divided by group, all I can do is select all checkboxes, not by group
here's is my blade:
<div class="col-md-6 ">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 1</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group1" type="checkbox" class="custom-control-input" onchange="checkAll(this)"/>
<label for="selectall_group1" class="custom-control-label">
Select All
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content10" name="permission_id[]" type="checkbox" class="custom-control-input"/>
<label for="content10" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content11" name="permission_id[]" type="checkbox" class="custom-control-input"/>
<label for="content11" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 2</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group2" type="checkbox" class="custom-control-input" onchange="checkAll(this)"/>
<label for="selectall_group2" class="custom-control-label">
Select All
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content12" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content12" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content13" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content13" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>
I already add select all but it's select all checkboxes, I don't know if I should fix the loop so I can get id from the permission. I just stuck on this.
here's the javascript that I use for the select
<script>
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox' && !(checkboxes[i].disabled)) {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}
</script>
fiddle here:
https://jsfiddle.net/rs2g9ct3/

This works with your HTML if you add a class to the wrapper div - I chose groupContainer
I delegate from document - if you have a closer static container, use that instead
document.addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.type && tgt.type==="checkbox" && tgt.id.startsWith("selectall")) {
const checked = tgt.checked;
const parent = tgt.closest(".groupContainer");
const checks = parent.querySelectorAll("input[type=checkbox][id^=content]");
[...checks].forEach(chk => {
if (!chk.disabled) chk.checked = checked;
})
}
})
<div class="col-md-6 groupContainer">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 1</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group1" type="checkbox" class="custom-control-input" />
<label for="selectall_group1" class="custom-control-label">Select All</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content10" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content10" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content11" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content11" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>
<div class="col-md-6 groupContainer">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 2</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group2" type="checkbox" class="custom-control-input" />
<label for="selectall_group2" class="custom-control-label">
Select All
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content12" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content12" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content13" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content13" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>

My .slidedown() function doesnot work properly in react

Hi I am slicing the objects in an array to show me only 12 objects. But when I try to load more objects, it doesnt slide properly, it slides down but the shown object disappears. Below is my code of a section that has a problem in a class component. In the same section I am trying to shuffle the objects based on there categories. I have given my shuffle and load more methods below. When I comment out the shuffle code it works properly. Please help.
component:
<section className="explore-area load-more">
<div className="container ">
<div className="row justify-content-center">
<div className="col-12 col-md-8 col-lg-7">
{/* Intro */}
<div className="intro text-center mb-4">
<span>{this.state.initData.pre_heading}</span>
<h3 className="mt-3 mb-0">{this.state.initData.heading}</h3>
<p>{this.state.initData.content}</p>
</div>
</div>
</div>
<div className="row justify-content-center text-center">
<div className="col-12">
{/* Explore Menu */}
<div className="explore-menu btn-group btn-group-toggle flex-wrap justify-content-center text-center mb-4" data-toggle="buttons">
<label className="btn active d-table text-uppercase p-2">
<input type="radio" defaultValue="all" defaultChecked className="explore-btn" />
<span>{this.state.initData.filter_1}</span>
</label>
<label className="btn d-table text-uppercase p-2">
<input type="radio" defaultValue="art" className="explore-btn" />
<span>{this.state.initData.filter_2}</span>
</label>
<label className="btn d-table text-uppercase p-2">
<input type="radio" defaultValue="music" className="explore-btn" />
<span>{this.state.initData.filter_3}</span>
</label>
<label className="btn d-table text-uppercase p-2">
<input type="radio" defaultValue="collectibles" className="explore-btn" />
<span>{this.state.initData.filter_4}</span>
</label>
<label className="btn d-table text-uppercase p-2">
<input type="radio" defaultValue="sports" className="explore-btn" />
<span>{this.state.initData.filter_5}</span>
</label>
</div>
</div>
</div>
<div className="row items explore-items ">
{this.state.data.map((item, idx) => {
return (
<div key={`edth_${idx}`} className="col-12 col-sm-6 col-lg-3 explore-item item" data-groups={item.group}>
<div className="card">
<div className="image-over">
<a href="/item-details">
<img className="card-img-top" src={item.img} alt="" />
</a>
</div>
{/* Card Caption */}
<div className="card-caption col-12 p-0 ">
{/* Card Body */}
<div className="card-body">
<a href="/item-details">
<h5 className="mb-0">{item.title}</h5>
</a>
<div className="seller d-flex align-items-center my-3">
<span>Owned By</span>
<a href="/author">
<h6 className="ml-2 mb-0">{item.owner}</h6>
</a>
</div>
<div className="card-bottom d-flex justify-content-between">
<span>{item.price}</span>
<span>{item.count}</span>
</div>
<a className="btn btn-bordered-white btn-smaller mt-3" href="/wallet-connect"><i className="icon-handbag mr-2" />{item.btnText}</a>
</div>
</div>
</div>
</div>
);
})}
</div>
<div className="row ">
<div className="col-12 text-center">
<a id="load-btn" className="btn btn-bordered-white mt-5" >{this.state.initData.btnText}</a>
</div>
</div>
</div>
</section>
/*----------------------------------------------
5. Load More
----------------------------------------------*/
(function ($) {
'use strict';
$(".load-more .item").slice(0, 12).show();
$("#load-btn").on('click', function (e) {
e.preventDefault();
$(".load-more .item:hidden").slice(0, 4).slideDown();
if ($(".load-more .item:hidden").length == 0) {
$("#load-btn").fadeOut('slow');
}
});
}(jQuery));
/*----------------------------------------------
6. Shuffle
----------------------------------------------*/
(function ($) {
'use strict';
$('.explore-area').each(function(index) {
var count = index + 1;
$(this).find('.explore-items').removeClass('explore-items').addClass('explore-items-'+count);
$(this).find('.explore-item').removeClass('explore-item').addClass('explore-item-'+count);
$(this).find('.explore-btn').removeClass('explore-btn').addClass('explore-btn-'+count);
var Shuffle = window.Shuffle;
var Filter = new Shuffle(document.querySelector('.explore-items-'+count), {
itemSelector: '.explore-item-'+count,
buffer: 1,
})
$('.explore-btn-'+count).on('change', function (e) {
var input = e.currentTarget;
if (input.checked) {
Filter.filter(input.value);
}
})
});
}(jQuery));

When I count box which are checked, it counts plus one box

My web-app is about forecasting on sports games.
My page shows all the matches and the points you can get out of each outcome from a match (Madrid = 12 points VS Barcelone = 15 points).
So a user check a box from a match and select for him the right outcome.
I would like each time the user check a box, to show him the number of boxes he checked.
Here is my Javascript to count the box checked :
const updateCount = function() {
var x = document.querySelectorAll(".square:checked").length;
document.querySelector(".plus").innerHTML = x;
};
Here is the HTML where the number of box checked will be displayed
<div class=" d-flex pt-2">
<h3 class="typos">Matchs pronostiqués</h3>
<h3 class="typos pts" style="font-weight: bold; padding-left: 5px;"><%= current_user.forecasts.where(confirmed: true, season_id: Season.last.id).count %>/50</h3>
<span class="plus"></span>
</div>
Here is my Javascript in order to know which game the user forecasted and which outcome he selected :
const selectOutcome = () => {
const selects = document.querySelectorAll(".square");
selects.forEach((outcome)=>{
outcome.addEventListener("click",(event) => {
$('input[type="checkbox"]').on('change', function() {
$(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});
const result = event.currentTarget.dataset.outcome;
console.log(result);
const id = event.currentTarget.parentNode.dataset.id;
console.log(id);
const box = event.currentTarget.checked;
console.log(box);
const url = 'store_outcome?result='+result+'&match='+id+'&box='+box
fetch(url)
.then(response => response.json())
.then((data) => {
console.log(data);
});
});
});
}
const validePanier = () => {
const panier = document.getElementById('panier');
panier.addEventListener("click", (event) =>{
console.log("click")
const player = document.getElementById('season_player').value;
fetch('confirm_pending?player='+player)
.then(response => response.json())
.then((data) => {
console.log(data);
});
})
}
Here is my HTML, for each match I have in my database, a match is going to appear in front in this way.
<% #matches.each do |match| %>
<% if Time.parse(match.kick_off) > Time.now && current_user.forecasts.find_by(match_id: match.id, confirmed: true).nil? && match.points_home.present? %>
<% if match.sport == "football" %>
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo"><%= match.league %></h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit"><%= DateTime.parse(match.kick_off).to_date%></h3><h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2"><%= match.kick_off.to_s.gsub("T", " ").split[1].gsub("+", " ").split[0]%></h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="<%= match.id %>">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo"><%= image_tag "#{match.team_home_logo_url}", width: 50 %></h3>
</div>
<div class="row text-align-center">
<h3 class="tit"><%= match.team_home %></h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="<%= match.id %>">
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="1"></input>
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="NULL"></input>
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="2"></input>
</div>
</div>
</div>
There is a data-id. The purpose is when a user check a box, I can get the id of the match, in order to create the right forecast for the right game.

I would delegate instead of having inline event handlers
Here I COUNT the checkboxes - why do you not want the VALUE of a checked RADIO?
Note I wrapped all matches in <div id="matches">...</div>
document.getElementById("matches").addEventListener("change", function(e) {
const tgt = e.target;
if (tgt.classList.contains("square")) {
const parent = tgt.closest(".displaysquares");
var x = parent.querySelectorAll(".square:checked").length;
document.querySelector(".plus").innerHTML += parent.dataset.id + ": " + x +"<br/>" ;
}
})
<span class="plus"></span>
<div id="matches">
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 1</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 1">
<input type="checkbox" class="square" data-outcome="1">
<input type="checkbox" class="square" data-outcome="NULL">
<input type="checkbox" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 2</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 2">
<input type="checkbox" class="square" data-outcome="1">
<input type="checkbox" class="square" data-outcome="NULL">
<input type="checkbox" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
</div>
Using Radios instead
const matches = document.getElementById("matches")
matches.addEventListener("change", function(e) {
const tgt = e.target;
if (tgt.classList.contains("square")) {
var x = [...matches.querySelectorAll(".square:checked")].map(chk => chk.closest(".displaysquares").dataset.id + ": "+chk.dataset.outcome)
document.querySelector(".plus").innerHTML = x.join("<br/>");
}
})
<span class="plus"></span>
<div id="matches">
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 1</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 1">
<input type="radio" name="outcome1" class="square" data-outcome="1">
<input type="radio" name="outcome1" class="square" data-outcome="NULL">
<input type="radio" name="outcome1" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 2</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 2">
<input type="radio" name="outcome2" class="square" data-outcome="1">
<input type="radio" name="outcome2" class="square" data-outcome="NULL">
<input type="radio" name="outcome2" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
</div>

Get innerHTML value onclick from div (in javascript)

I'm using JavaScript to change the price value of the div based on the selected div, the price is already defined in the div, if I click on any div it should updated the value in the another div as well. so far I have try below code but it doesn't work, it changes the value of only first div. if I click on another div it repeats the same price value.
Here's the code I have tried so far!
let pricebox = document.getElementById('pricingdata');
const totalprice = document.querySelector("#totalprice");
pricebox.addEventListener('click', function(e) {
let mainprice = document.getElementById("pricecad").innerHTML;
console.log(mainprice);
totalprice.innerHTML = '$' + mainprice;
});
<div class="row text-center pricing-box" id="pricingdata">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>

This code should work. Click Run code snippet and check the result.
const totalprice = document.querySelector("#totalprice");
const priceboxes = document.querySelectorAll('.pricing-box-cad');
for (var i = 0; i < priceboxes.length; i++) {
priceboxes[i].onclick = (e) => {
const mainprice = e.currentTarget.querySelector('.pricecad').innerText;
totalprice.innerText = '$' + mainprice;
}
}
<div class="row text-center pricing-box">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>

remove all id="pricecad" as polyglot wrote, ids must be unique
you are looking for event delegation, replace your code by:
const pricebox = document.getElementById('pricingdata')
, totalprice = document.querySelector("#totalprice")
;
pricebox.addEventListener('click', function (e)
{
if (!e.target.matches('span.display-5')) return // ignore clicks else where
totalprice.textContent = '$' + e.target.textContent;
});
for click on every .pricing-box-cad' elements do
const pricebox = document.getElementById('pricingdata')
, totalprice = document.querySelector("#totalprice")
;
pricebox.addEventListener('click', function (e)
{
let pricingBox = e.target
while (!pricingBox.matches('div.pricing-box-cad'))
{
if (!pricingBox.parentElement) break
pricingBox = pricingBox.parentElement
}
if (!pricingBox.matches('div.pricing-box-cad')) return // ignore clicks else where
totalprice.textContent = '$' + pricingBox.querySelector('span.display-5').textContent
});

Again using bubbling/delgation, this method uses closest to find the ".pricing-box-cad" ancestor of the element clicked then gets the element with the price. Note the duplicate IDs have been moved to class.
Also note if you need to support IE (for a start I'm sorry about that!) you will need to use a pollyfill (mentioned in the link above).
let pricingData = document.getElementById("pricingdata");
const totalprice = document.querySelector("#totalprice");
//Set even listener on parent box
pricingData.addEventListener("click", function(e) {
//Find closest pricing box ancestor
let priceBox = e.target.closest(".pricing-box-cad")
if(priceBox) {
let price = priceBox.querySelector(".pricecad").innerText;
//console.log(price)
totalprice.textContent = "$" + price;
}
//Alert if clicked outside a pricing box
else {alert("clicked outside area") }
});
<div class="row text-center pricing-box" id="pricingdata">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">31</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
Now just for fun, I wanted to see how much I could do in CSS alone with minimal JS. So I came up with the below. This is for demonstration purposes only and is really just to show what you can achieve with minimal JS.
let pricingData = document.getElementById("pricingdata");
const totalprice = document.querySelector("#totalprice");
//Set even listener on parent box
pricingData.addEventListener("click", function(e) {
//Get value from radio button
let value = this.querySelector("[name=price]:checked").value;
//UPdate Attribute on price CSS will take care of the rest
totalprice.dataset.total = "$" + value;
});
#pricingdata label {
display:block;
}
#pricingdata :checked + label {
background-color:#CCC;
}
#pricingdata input[type=radio] {
display:none;
}
#totalprice:before {
content : attr(data-total)
}
<div class="row text-center pricing-box" id="pricingdata">
<input type="radio" value="30" id="rdoPrice1" name="price">
<label for="rdoPrice1" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="31" id="rdoPrice2" name="price">
<label for="rdoPrice2" class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">31</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="30" id="rdoPrice3" name="price">
<label for="rdoPrice3" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="30" id="rdoPrice4" name="price">
<label for="rdoPrice4" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="69" id="rdoPrice5" name="price" checked>
<label for="rdoPrice5" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice" data-total="$69"></strong></div>
</div>

JavaScript does not work in HTML email templates

I need to send an email using PHP, which could be easily done using SMTP, but the challenge is to embed a web service in the HTML mail, which is why I used JavaScript in the body of the message to access the Web service when a button click is triggered.

<div class="container">
<div class="row">
<div class="col-lg-5 " >
<div class="shadow bg-white stick-to-content mb-4">
<div class="bg-dark dark p-4"><h5 class="mb-0">Votre commande</h5></div>
<div id="mainDiv">
<div class="bg-dark dark p-4 hide"><h5 class="mb-0">Son commande</h5></div>
<table class="table-cart" id="table-cart">
<!-- Contenu du cart list (liste de meal) -->
<!-- content code jquery -->
</table>
<div class="cart-summary">
<div class="row">
<div class="col-7 text-right text-muted">Order total:</div>
<div class="col-5"><strong class="orderTotal"></strong></div>
</div>
<div class="row devlieryHide">
<div class="col-7 text-right text-muted">Devliery:</div>
<div class="col-5"><strong class="devliery"></strong></div>
</div>
<hr class="hr-sm">
<div class="row text-lg">
<div class="col-7 text-right text-muted">Total:</div>
<div class="col-5"><strong class="total"></strong></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 ">
<form action="{{route('sendCHeckOutToMail')}}" method="post">
#csrf
<div class="bg-white p-4 p-md-5 mb-4">
<h4 class="border-bottom pb-4"><i class="ti ti-user mr-3 text-primary"></i>Informations de base</h4>
<div class="row mb-5">
<div class="form-group col-sm-6">
<label>Nom:</label>
<input type="text" name="nom" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Prénom:</label>
<input type="text" name="prenom" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Ville:</label>
<input type="text" name="ville" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Rue et numéro:</label>
<input type="text" name="zip_code" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Téléphone:</label>
<input type="text" name="phone" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>E-mail:</label>
<input type="email" name="mail" class="form-control">
</div>
</div>
<h4 class="border-bottom pb-4"><i class="ti ti-package mr-3 text-primary"></i>Livraison</h4>
<div class="row mb-5">
<div class="form-group col-sm-6">
<label>Heure de livraison:</label>
<div class="select-container">
<select name="date_livraison" class="form-control">
<option>Aussi vite comme possible</option>
<option>Dans une heure</option>
<option>Dans deux heures</option>
</select>
</div>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-lg"><span>Commandez maintenant!</span></button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Fonctions du cart Shopping -->
<script src="{{ asset('frontEnd/assets/js/js/cartShopping.js') }}"></script>
<!-- Evenements du carnet d'adresses -->
<script src="{{ asset('frontEnd/assets/js/js/events.js') }}"></script>