We Keep Coding

Multi step form (no next button) with conditional logic

I'm using a multi-step form from this question and answer on StackOverflow
To add to this form;
1.) how can it work with conditional logic, as in, if the user's input radio first question is to choose ppc or organic, if they select organic then only certain "hidden" divs with "organic" class show, and the PPC related divs don't. But the other neutral hidden divs will show later. I think the problem is they are all hidden already so the first script seems to override the second javascript that looks for "if this... else".
2.)A second problem with the multi-step form without buttons above is you cannot tab to a second or third input text field on the last page. It just blanks out.
<script type='text/javascript'>
$(document).ready(function(){
$('#traffic').on('change', function() {
if ( this.value == 'organic' )
{
$(".org").show();
$(".ppc").hide();
}
else
{
$(".org").hide();
$(".ppc").show();
}
});
});
</script>
<script type="text/javascript">
document.querySelector("form").onchange = function(e) {
var currentFormPage = e.target.parentElement.parentElement;
console.log(e.target.name + ": " + e.target.value);
if(currentFormPage.nextElementSibling) {
currentFormPage.classList.add("hidden");
currentFormPage.nextElementSibling.classList.remove("hidden");
}
}
</script>
<form>
<h2>Free Google Ads Audit!</h2>
<div>
<h4>Do you want Organic or PPC traffic right now?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="traffic" id="traffic" value="" checked></label>
<label class="radio-choice"><input type="radio" name="traffic" id="traffic" value="organic">Organic is the best</label>
<label class="radio-choice"><input type="radio" name="traffic" id="traffic" value="ppc">PPC is better</label>
</div>
<div class="hidden ppc">
<h4>What's your monthly ads budget?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="whats_your_monthly_ads_budget" value="" checked></label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="2000-10000">2,000 - 10,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="11000-50000">11,000 - 50,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="51000-100000">51,000 - 100,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="+100000">100,000+</label>
</div>
<div class="hidden ppc">
<h4>Have you ever had an Adwords account?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="adwords" value="" checked></label>
<label class="radio-choice"><input type="radio" name="food" id="adwords" value="2-3 years">Yes</label>
<label class="radio-choice"><input type="radio" name="food" id="adwords" value="5 years">No</label>
</div>
<div class="hidden org">
<h4>How much experience do you have?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="experience" value="" checked></label>
<label class="radio-choice"><input type="radio" name="exp" id="experience" value="2-3 years">2-3 years</label>
<label class="radio-choice"><input type="radio" name="exp" id="experience" value="5 years">5 years</label>
</div>
<div class="hidden">
<h4>What are your Goal(s)?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="what_are_your_goals" value="" checked></label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Lead Generation">Lead Generation</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Brand Awareness">Brand Awareness</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Online Sales">Online Sales</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Sign-ups">Sign-ups</label>
</div>
<div class="hidden">
<h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
<input type="text" placeholder="Full name">
<input type="email" placeholder="Company Email">
<input type="button" name="email" value="Download">
</div>
</form>

This should work how you want it. Unfortunately, jquery invokes the first id as they're unique so if you want multiple elements to do the same functionality you'll have to make them all classes.
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
.hidden {
display: none;
}
</style>
<script>
$(document).ready(function() {
$('.traffic').on('change', function() {
if (this.value === "organic") {
$(".org").show();
$(".ppc").hide();
} else {
$(".org").hide();
$(".ppc").show();
}
});
});
</script>
</head>
<body>
<form>
<h2>Free Google Ads Audit!</h2>
<div>
<h4>Do you want Organic or PPC traffic right now?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="traffic" id="traffic" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="traffic" class="traffic" value="organic">Organic is the best </label>
<label class="radio-choice">
<input type="radio" name="traffic" class="traffic" value="ppc">PPC is better </label>
</div>
<div class="hidden ppc">
<h4>What's your monthly ads budget?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="whats_your_monthly_ads_budget" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="2000-10000">2,000 - 10,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="11000-50000">11,000 - 50,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="51000-100000">51,000 - 100,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="+100000">100,000+ </label>
</div>
<div class="hidden ppc">
<h4>Have you ever had an Adwords account?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="adwords" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="food" id="adwords" value="2-3 years">Yes </label>
<label class="radio-choice">
<input type="radio" name="food" id="adwords" value="5 years">No </label>
</div>
<div class="hidden org">
<h4>How much experience do you have?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="experience" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="exp" id="experience" value="2-3 years">2-3 years </label>
<label class="radio-choice">
<input type="radio" name="exp" id="experience" value="5 years">5 years </label>
</div>
<div class="hidden">
<h4>What are your Goal(s)?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="what_are_your_goals" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Lead Generation">Lead Generation </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Brand Awareness">Brand Awareness </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Online Sales">Online Sales </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Sign-ups">Sign-ups </label>
</div>
<div class="hidden">
<h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
<input type="text" placeholder="Full name">
<input type="email" placeholder="Company Email">
<input type="button" name="email" value="Download">
</div>
</form>
</body>
</html>

How to get the value of various checkbox

I have created multiple checkbox with different names as seen in the code snippet and will like to get the values of each of them i.e if the user clicks on a checkbox the value 1 is stored and 0 if not clicked but I keep getting only the 0 value for all of them. It doesn't seem to be reading if I click it or not. I have tried various answers I have seen online and on this platform but to no avail.
My code snippet is:
<div class="col-xs-6 col-sm-4 border-pdf-td">
<div class="checkbox">
<label for="telecommunication">
<input name="telecommunication" type="hidden" value="0" />
<input type="checkbox" value="1" name="telecommunication" />
Telecommunication
</label>
</div>
</div>
<div class="col-xs-6 col-sm-5 border-pdf-td">
<div class="checkbox">
<label for="grocery">
<input name="grocery" type="hidden" value="0" />
<input type="checkbox" value="1" name="grocery" />
Grocery and Supermarkets
</label>
</div>
</div>
<div class="col-xs-6 col-sm-3 border-pdf-d">
<div class="checkbox">
<label for="petroleum">
<input name="petroleum" type="hidden" value="0" />
<input type="checkbox" value="1" name="petroleum" />
Petroleum
</label>
</div>
</div>
<div class="col-xs-12 col-sm-4 border-pdf-d">
<div class="checkbox">
<label for="ecommerce">
<input name="ecommerce" type="hidden" value="0" />
<input type="checkbox" value="1" name="ecommerce" />
E-Commerce
</label>
</div>
</div>
<div class="col-xs-12 col-sm-5 border-pdf-d">
<div class="checkbox">
<label for="mailorder">
<input name="mailorder" type="hidden" value="0" />
<input type="checkbox" value="1" name="mailorder" />
Mail order/telephone order (MOTO)
</label>
</div>
</div>
The current state of my JavaScript code to get the values is
var telecommunication = document.getElementsByName("telecommunication")[0].value;
var grocery = document.getElementsByName("grocery")[0].value;
var petroleum = document.getElementsByName("petroleum")[0].value;
var ecommerce = document.getElementsByName("ecommerce")[0].value;
var mailorder = document.getElementsByName("mailorder")[0].value;
I previously tried the code below but keep getting same results.
var telecommunication = document.querySelector('input[name="telecommunication"]:checked').value;
var grocery = document.querySelector('input[name="grocery"]:checked').value;
var petroleum = document.querySelector('input[name="petroleum"]:checked').value;
var ecommerce = document.querySelector('input[name="ecommerce"]:checked').value;
var mailorder = document.querySelector('input[name="mailorder"]:checked').value;
Please note that I have these checkbox and more on same form to get their values by their unique name.

I think you don't need this
<input name="telecommunication" type="hidden" value="0" />
So grab the value
var telecommunication = document.querySelector('input[name="telecommunication"]:checked') ? 1 : 0;

I think you are using a bad pattern of design for your form. If you want to send a 1 or a 0 then you should use radio buttons instead of checkboxes.
Checkboxes (and radios) are designed to be included in a request only when they are checked.
You can use a FormData object to get all the values from the form.
const form = document.querySelector('form');
form.addEventListener('change', event => {
const formData = new FormData(form);
for (const [ name, value ] of formData) {
console.log(`${name}:`, value);
}
});
.as-console-wrapper {
max-height: 100px !important;
}
<form>
<div class="form-group">
<h4>Telecommunication</h4>
<label>
Yes
<input type="radio" value="1" name="telecommunication" checked />
</label>
<label>
No
<input type="radio" value="0" name="telecommunication" />
</label>
</div>
<div class="form-group">
<h4>Grocery and Supermarkets</h4>
<label>
Yes
<input type="radio" value="1" name="grocery" checked />
</label>
<label>
No
<input type="radio" value="0" name="grocery" />
</label>
</div>
<div class="form-group">
<h4>Petroleum</h4>
<label>
Yes
<input type="radio" value="1" name="petroleum" checked />
</label>
<label>
No
<input type="radio" value="0" name="petroleum" />
</label>
</div>
<div class="form-group">
<h4>E-Commerce</h4>
<label>
Yes
<input type="radio" value="1" name="ecommerce" checked />
</label>
<label>
No
<input type="radio" value="0" name="ecommerce" />
</label>
</div>
<div class="form-group">
<h4>Mail order/telephone order (MOTO)</h4>
<label>
Yes
<input type="radio" value="1" name="mailorder" checked />
</label>
<label>
No
<input type="radio" value="0" name="mailorder" />
</label>
</div>
</form>

I want to dynamically get values of all checked radio buttons in certain div on a click of button

I want to dynamically get values of all checked radio buttons in certain div on a click of button .add
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
And here is .js function that should get the values of radio buttons and append it to list, but im not getting any response.
$('.add').click (function(){
$(this).siblings("fieldset").children("input[type=radio]:checked")
.each(function () {
var selectedOptions = $(this).parent().text();
$(".orderOptions").last().append("<li> +selectedOption+ </li>");
});
});
So whole process is: .click (get values of all checked radio buttons from html div) and save it to the list.

In your click event you wrote:
$(this).siblings("fieldset").children("input[type=radio]:checked")
this is wrong because this here is reference to the button not the div which you want to get the input inside it.
so you have to use the div itself :
$('#call1 fieldset input[type=radio]:checked')
then you can simply get the checked value by this.value and append it to any other div.
$('.add').click (function(){
$('#call1 fieldset input[type=radio]:checked')
.each(function () {
$('.orderOptions').append("<li>" +this.value+ "</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>

This is working
$(this).parent().children(".option1").children("fieldset").children("input[type='radio']:checked").each(function (index,element) {
var selectedOptions = $(element).prev("label").text();
$(".orderOptions").last().append("<li>" +selectedOptions+ "</li>");
});
Html
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<ul class="orderOptions">
</ul>
</div>

If you want to address a fieldset relative to your "add" button, then you can use something like this:
$('.add').click (function(){
...
$(this).siblings('div').find(':checked')
...
});
This works, because not your <fieldset> but the <div class="option1"> is the sibling of the pressed button. Once you have found the right div with the fieldset within, the selector for the checked options can be simplified to :checked, since it searches within the <div> ("write less do more ...").
$('.add').click (function(){
$('.orderOptions').append('<hr><ul>'+
$(this).siblings('div').find(':checked')
.map((_,e)=>"<li>"+e.value+"</li>").get().join('')+'</ul>'
)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>

Show/Hide IDs with multiple radio buttons and IDs

So I have run into a little problem. I am making a Contact Form that changes according to the Users needs.
This is my html code. My goal is to First, Hide most of the Content with the first set of raio buttons. I actually managed to get that with this Javascript:
$(function() {
$('#report').on('click', function() {
if ($(this).is(':checked')) {
$('#phonenumber').hide();
$('#dateofplay').hide();
$('#customertype').hide();
$('#studentprices').hide();
$('#privateprices').hide();
$('#companyprices').hide();
$('#customsetup').hide();
} else {
$('#phonenumber').show();
$('#dateofplay').show();
$('#customertype').show();
$('#studentprices').show();
$('#privateprices').show();
$('#companyprices').show();
$('#customsetup').show();
}
})
$('#booking').on('click', function() {
if ($(this).is(':checked')) {
$('#phonenumber').show();
$('#dateofplay').show();
$('#customertype').show();
$('#studentprices').show();
$('#privateprices').show();
$('#companyprices').show();
$('#customsetup').show();
} else {
$('#phonenumber').hide();
$('#dateofplay').hide();
$('#customertype').hide();
$('#studentprices').hide();
$('#privateprices').hide();
$('#companyprices').hide();
$('#customsetup').hide();
}
})
$('#student').on('click', function() {
if ($(this).is(':checked')) {
$('#privateprices').hide();
$('#companyprices').hide();
} else {
$('#privateprices').show();
$('#companyprices').show();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="main" class="ui-content" align="center">
<div class="ui-content-spacer">
<h3 class="ui-bar ui-bar-a ui-corner-all ui-content-spacer">
Booking Form
</h3>
<div class="ui-body ui-body-a ui-corner-all ui-content-spacer">
<form method="post" action="">
<div class="form-field-contain">
<fieldset data-role="controlgroup">
<legend>While the page is still under developement please define your inquiry: </legend>
<input type="radio" name="settings" id="report" value="report">
<label for="report">Bug Report</label>
<input type="radio" name="settings" id="booking" value="booking" checked="checked">
<label for="booking">Booking</label>
</fieldset>
</div>
<div class="form-field-contain ui-field-contain">
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" value="" placeholder="First Name...">
</div>
<div class="form-field-contain ui-field-contain">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" value="" placeholder="Last Name...">
</div>
<div class="form-field-contain ui-field-contain">
<label for="email">E-Mail</label>
<input type="email" name="email" id="email" value="" placeholder="E-Mail...">
</div>
<div class="form-field-contain ui-field-contain" id="phonenumber">
<label for="tel">Phone:</label>
<input type="tel" name="tel" id="tel" value="" placeholder="Phone #...">
</div>
<div class="form-field-contain ui-field-contain" id="dateofplay">
<label for="date">Date of event:</label>
<input type="date" name="date" id="date" value="" placeholder="Please choose a Date">
</div>
<div class="form-field-contain ui-field-contain">
<label for="message">Write a quick Message:</label>
<textarea cols="40" rows="8" name="message" id="message" placeholder="Your Message here..."></textarea>
</div>
<div class="form-field-contain" id="customertype">
<fieldset data-role="controlgroup">
<label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
<label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
<label><input type="radio" name="customertype" id="company" value="company">Company</label>
</fieldset>
</div>
<div class="form-field-contain" id="studentprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="studentprice" id="studentminimal" value="studentminimal" checked="checked">Minimal</label>
<label><input type="radio" name="studentprice" id="studentsoundonly" value="studentsoundonly">Sound Only</label>
<label><input type="radio" name="studentprice" id="studentsoundandlight" value="studentsoundandlight">Sound and Light</label>
<label><input type="radio" name="studentprice" id="studentpartypackage" value="studentpartypackage">Total Party Package</label>
<label><input type="radio" name="studentprice" id="studentcustom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="privateprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="privateprice" id="minimal" value="150" checked="checked">Minimal</label>
<label><input type="radio" name="privateprice" id="soundonly" value="200">Sound Only</label>
<label><input type="radio" name="privateprice" id="soundandlight" value="300">Sound and Light</label>
<label><input type="radio" name="privateprice" id="partypackage" value="400">Total Party Package</label>
<label><input type="radio" name="privateprice" id="custom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="companyprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="companyprice" id="companyminimal" value="200" checked="checked">Minimal</label>
<label><input type="radio" name="companyprice" id="companysoundonly" value="300">Sound Only</label>
<label><input type="radio" name="companyprice" id="companysoundandlight" value="400">Sound and Light</label>
<label><input type="radio" name="companyprice" id="companypartypackage" value="500">Total Party Package</label>
<label><input type="radio" name="companyprice" id="companycustom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="customsetup">
<fieldset data-role="controlgroup" id="customsetup">
<legend>Custom choices:</legend>
<label><input type="checkbox" name="speakers" id="speakers" value="">Speakers</label>
<label><input type="checkbox" name="subwoofer" id="subwoofer" value="">Subwoofer</label>
<label><input type="checkbox" name="lighting" id="lighting" value="">Lighting</label>
<label><input type="checkbox" name="strobe" id="strobe" value="">Strobelight</label>
<label><input type="checkbox" name="fog" id="fog" value="">Fogmachine</label>
<label><input type="checkbox" name="table" id="table" value="">Table</label>
</fieldset>
</div>
<div class="form-field-contain">
<input type="submit" name="submit" value="Submit" data-inline="true">
<input type="reset" name="reset" value="Reset" data-inline="true">
</div>
</form>
</div>
</div>
</div>
I think the problem is that, because the first show/hide function is hiding/showing the ID's it overrides any following function. I can't wrap my head around how I can continue the code so the radio buttons that are not required are hidden.
So if,
#student is selected, #privateprices and #companyprices choices are hidden
#private is selected, #studentprices and #companyprices choices are hidden
#company is selected, #studentprices and #privateprices choices are hidden
Is it even possible or is there a easier more effective method of achieving this? Especially when I start creating the php for the form? Thanks in advance
EDIT: The last piece of code in the Javascript is my attempt hide the first set of radiobuttons.

You can check which radio button is selected in page loading and show / hide the panels. Please see working fiddle here:
https://jsfiddle.net/ranjitsachin/Leav016c/2/
$('#student').on('click', function() {
if ($(this).is(':checked')) {
$("#studentprices").show();
$('#privateprices, #companyprices').hide();
}
});
$('#private').on('click', function() {
if ($(this).is(':checked')) {
$("#privateprices").show();
$('#studentprices, #companyprices').hide();
}
});
$('#company').on('click', function() {
if ($(this).is(':checked')) {
$("#companyprices").show();
$('#studentprices, #privateprices').hide();
}
});

Here is a working pen on how I would do it. http://codepen.io/anon/pen/jBryOa
In this pen, i added the classes of report-group and booking-group to the respective divs, added a class of hide-group to the css with a setting of display: none; and then add and remove the class hide-group based on which radio button is checked. I also added the class hide-group in the html to the div's that need to be initially hidden.
I did not add the groups to every div. just enough to show you what you need to do.

JQuery update input value based on another form input

I have the following fields on a form and was wondering if it is possible to update the hidden input field (itemValue) value based on the user selection from radio buttons? So that the hidden field input value will be equal to the value of the selected radio button...Any example is highly appreciated. Thanks
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item1" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item2" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item3" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item4" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>

Your radio buttons are currently all independent of each other, meaning that you can quite literally select all 4 of them at the same time. In order to get them to work together (so you can only ever select one at any given time), you'll need to give them all an identical name. For example:
<input type="radio" id="item1" name="item" value="5"/>
...
<input type="radio" id="item2" name="item" value="10"/>
Notice how these both have a name of "item"?
Once you've done that, you can use jQuery like this:
$('[name="item"]').on('change', function() {
$('[name="itemValue"]').val($(this).val());
});
JSFiddle demo. (Note that I've used a text input element rather than a hidden one to easily show you that the value changes.)

$("input[type=radio]").change(function () {
if ($(this).prop(":checked")) {
$('#yourId').val($(this).val())
}
});

<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
JQuery>
$(function(){
$("input[name='item']").change(function(){
$("input[name='itemValue']").val($(this).val());
alert($("input[name='itemValue']").val());
});
});

$('input:radio').change(function () {
if (this.checked) {
$('#hidfld').val($(this).val()));
}
});