Develop Reference

Creating a whole number with percentage calculator

I am trying to use the percentage calculator (code below) but I only want it to out put whole numbers (rounded up where possible) as you cant have .3 of a business lead.
I have the code working so that it calculates and functions as intended but just need to reduce it to 0 decimal spaces.
I am building this onto wordpress but am happy to use a plugin or alternatively a 3rd party script if needed to solve this issue.
<style>
.entry-title {
display: none;
}
.calculator {
margin-bottom: 80px;
}
.calculator-banner {
padding: 100px 0px;
}
.calculator-banner h1 {
font-size: 55px;
font-weight: 300;
color: #4d4d4e;
text-align: center;
}
.calculator-banner p {
text-align: center;
font-size: 25px;
color: #4d4d4e;
padding: 0px;
font-weight: 100;
line-height: normal;
max-width: 800px;
margin: 0 auto;
margin-top: 20px;
}
.calculator .col-sm-4:first-child {
border-right: 1px solid #f0f0f0;
}
.calculator .row:nth-child(even) {
background: #f0f0f0;
}
.calculator .col-sm-4 p {
margin-top: 0px;
}
.calculator p {
padding: 10px;
}
input {
background: none;
margin: 10px;
}
</style>
<div class="calculator-banner">
<div class="container">
<h1>Conversion <strong>Calculator</strong></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at dui eleifend neque ullamcorper mattis sed sed risus.</p>
</div>
</div>
<div class="calculator">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<h5>Without Software</h5>
</div>
<div class="col-sm-4">
<h5>With Software</h5>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Website Visitors Per Month</p>
</div>
<div class="col-sm-4">
<input type="number" name="price" id="websitevisitors-without" value="10000" onchange="myChangeFunction(this)" />
</div>
<div class="col-sm-4">
<input type="number" name="price" id="websitevisitors-with" value="10000" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Standard Form Fill Conversion </p>
</div>
<div class="col-sm-4">
<input type="number" name="qty" id="standard-form-fill-without" value="2"/>
</div>
<div class="col-sm-4">
<input type="number" name="qty" id="standard-form-fill-with" value="2"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Number of Form Fill Enquiries</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="number-of-form-fills-without" value="200" readonly />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="number-of-form-fills-with" value="200" readonly />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Conversion from Identified Website Visitors</p>
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Number of Website Visitor Conversions</p>
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Total Number of Opportunities</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="total-opportunities-without" value="200" readonly />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="total-opportunities-with" value="200" readonly />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Conversion of Opportunities to Sales</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="conversion-of-opportunities-without" value="20" />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="conversion-of-opportunities-with" value="20" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Number of Sales</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="number-of-sales-without" value="40" />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="number-of-sales-with" value="40" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Average Order Value</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="average-order-value-without" value="1000" />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="average-order-value-with" value="1000" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Revenue Generated</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="revenue-generated-without" value="40000" />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="revenue-generated-with" value="40000" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>12month business benefit</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="year-business-benefit-without" value="480000" step="0.01"/>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="year-business-benefit-with" value="480000" />
</div>
</div>
</div>
<script>
$('#websitevisitors-without, #standard-form-fill-without, #conversion-of-opportunities-without, #number-of-sales-without, #average-order-value-without, #year-business-benefit-without, #revenue-generated-without').change(function() {
var webvisitorswithout = parseFloat($('#websitevisitors-without').val()).toFixed(2);
var standardformfillwithout = parseFloat($('#standard-form-fill-without').val()).toFixed(2);
var converstionofopportunitieswihtout = parseFloat($('#conversion-of-opportunities-without').val()).toFixed(2);
var numberofsaleswithout = parseFloat($('#number-of-sales-without').val()).toFixed(2);
var averageordervaluewithout = parseFloat($('#average-order-value-without').val()).toFixed(2);
var yearbusinessbenefitwithout = parseFloat($('#year-business-benefit-without').val()).toFixed(2);
var revenuegeneratedwithout = parseFloat($('#revenue-generated-without').val()).toFixed(2);
$('#number-of-form-fills-without, #total-opportunities-without').val(webvisitorswithout * standardformfillwithout / 100);
$('#number-of-sales-without').val(webvisitorswithout * standardformfillwithout / 100 * converstionofopportunitieswihtout / 100);
$('#revenue-generated-without').val(averageordervaluewithout * numberofsaleswithout);
$('#year-business-benefit-without').val(revenuegeneratedwithout * 12);
});
</script>
<script>
$('#websitevisitors-with, #standard-form-fill-with, #conversion-of-opportunities-with, #number-of-sales-with, #average-order-value-with, #year-business-benefit-with, #revenue-generated-with').change(function() {
var webvisitorswith = parseFloat($('#websitevisitors-with').val());
var standardformfillwith = parseFloat($('#standard-form-fill-with').val());
var converstionofopportunitieswihtout = parseFloat($('#conversion-of-opportunities-with').val());
var numberofsaleswith = parseFloat($('#number-of-sales-with').val());
var averageordervaluewith = parseFloat($('#average-order-value-with').val());
var yearbusinessbenefitwith = parseFloat($('#year-business-benefit-with').val());
var revenuegeneratedwith = parseFloat($('#revenue-generated-with').val());
$('#number-of-form-fills-with, #total-opportunities-with').val(webvisitorswith * standardformfillwith / 100);
$('#number-of-sales-with').val(webvisitorswith * standardformfillwith / 100 * converstionofopportunitieswihtout / 100);
$('#revenue-generated-with').val(averageordervaluewith * numberofsaleswith);
$('#year-business-benefit-with').val(revenuegeneratedwith * 12).toFixed(2);
});
</script>
<script type="text/javascript">
function myChangeFunction(websitevisitors-without) {
var input2 = document.getElementById('websitevisitors-with');
websitevisitors-with.value = websitevisitors-without.value;
}
</script>

use Math.ceil to round up to the next bigger number
use Math.floor to round up to the next smaller number
eg
Math.ceil(0.3) // returns 1
Math.floor(0.3) //returns 0

How to get Multi-Step form validation working for password?

alright so for starters, i am using using https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps as the base of my form with modifications to it (see Below) validation is working properly if the fields are blank the next button does not work however if i try to add pattern required for password it does nothing. could anyone help? note: i do have a second script "vue.js' this is to display which of the Requirements have been fulfilled (also had to remove a chunk of code from last step due to word count limits
<form id="regForm" action="/action_page.php">
<!-- One "tab" for each step in the form: -->
<div class="tab">
<h3 class="text-center">Lets Get You Registered</h3>
<div class=" pt-25 pb-30 container">
<div class="col-md-5 col-sm-6 ">
<h3>Billing Information</h3>
<!--<div class="choose-us-image">
<img src="images/other/left.png" alt="">
</div>-->
<ul>
<li style="width: 48%"><label>First Name:</label><br><input type="textt" name="FirstName"></li>
<li style="width: 49%"><label style="padding-top:7px;">Last Name:</label><br><input type="textt" Name="LastName"></li>
<li style="width: 98%"><label style="padding-top:7px;">Address:</label><br><input type="textt" name="Address"></li>
<!-- <li style="width: 65%"><label style="padding-top:7px;">Address 2:</label><br><input type="textt" id="address2" name="adress2" style="display: none;" ></li>-->
<li><label style="padding-top:7px;">City:</label><br> <input style="width:125px; " type="textt" name="City"></li>
<li ><label style="padding-top:7px;">State:</label><br> <input style="width:65px; " maxlength="2" type="textt" name="State"></li>
<li><label style="padding-top:7px;">Zip Code:</label><br> <input style="width:76px; " type="textt"></li>
<li style="width: 35%"><label>Phone Number:</label><br><input type="textt"></li>
</ul>
</div>
<div class="col-md-5 col-sm-6 pull-right ">
<h3>Account Setup</h3>
<!--<div class="choose-us-image">
<img src="images/other/left.png" alt="">
</div>-->
<ul>
<li style="width: 100%"><label style="padding-top:7px;">Email:</label><br><input type="textt" name="Email"></li>
<li style="width: 100%"><label>Username</label><br><input type="textt" name="Username"></li>
<li style="width: 100%"><div id="app" >
<label class="
" for="password">Password</label>
<input placeholder="Enter your password" name="password" id="pass" class="frmField" type="password" #input="password_check" v-model="message" required/>
<label class="contained">Show Password
<input type="checkbox" class="checkbox" onclick="myFunction()"/>
<span class="checkmark"></span> <a style="font-size: 10px; float: right;" href="#containx" data-reveal-id="exampleModal"> Already Have a account? Sign in <u>here</u></a></label>
<p class="frmValidation" :class="{'frmValidation--passed' : message.length > 7}"><i class="frmIcon fas" :class="message.length > 7 ? 'fa-check' : 'fa-times'"></i> Longer than 7 characters</p>
<p class="frmValidation" :class="{'frmValidation--passed' :has_uppercase }"><i class="frmIcon fas" :class="has_uppercase ? 'fa-check' : 'fa-times'"></i> Has a capital letter</p>
<p class="frmValidation" :class="{'frmValidation--passed' :has_lowercase }"><i class="frmIcon fas" :class="has_lowercase ? 'fa-check' : 'fa-times'"></i> Has a lowercase letter</p>
<p class="frmValidation" :class="{'frmValidation--passed' : has_number }"><i class="frmIcon fas" :class="has_number ? 'fa-check' : 'fa-times'"></i> Has a number</p>
<p class="frmValidation" :class="{'frmValidation--passed' : has_special }"><i class="frmIcon fas" :class="has_special ? 'fa-check' : 'fa-times'"></i> Has a special character</p>
</div></li>
</ul>
</div>
</div>
<div style="overflow:auto;">
<div>
<button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)" style="float:right;">Next</button>
</div>
</div>
</div>
<div class="tab">
<h3 class="text-center">Next, Lets Choose a plan</h3>
<div class="row ptb-40">
<!-- Pricing table single -->
<div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30">
<div class="pricing-table-single white-bg">
<div class="table-category text-center">
<h6>Silver pack</h6>
<h1>$30<span> / month</span></h1>
</div>
<div class="pricing-list text-center">
<ul>
<li>30 messages</li>
<li>One number</li>
<li>Null</li>
<li>Null</li>
<li>Null</li>
</ul>
</div>
<div class="order-button text-uppercase text-center" onclick="nextPrev(1)">
<a onclick="base();" >Select</a>
</div>
</div>
</div>
<!-- Pricing table single -->
<!-- Pricing table single -->
<div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30">
<div class="pricing-table-single white-bg">
<div class="table-category text-center">
<h6>gold pack</h6>
<h1>$50<span> / month</span></h1>
</div>
<div class="pricing-list text-center">
<ul>
<li>50 messages</li>
<li>Two Numbers</li>
<li>Null</li>
<li>Null</li>
<li>Null</li>
</ul>
</div>
<div class="order-button text-uppercase text-center" onclick="nextPrev(1)">
<a onclick="pro();">Select</a>
</div>
</div>
</div>
<!-- Pricing table single -->
<!-- Pricing table single -->
<div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30">
<div class="pricing-table-single white-bg">
<div class="table-category text-center">
<h6>platinum pack</h6>
<h1>$90<span> / month</span></h1>
</div>
<div class="pricing-list text-center">
<ul>
<li>Unlimited Messages</li>
<li>Unlimited Numbers</li>
<li>Null</li>
<li>Null</li>
<li>Null</li>
</ul>
</div>
<div class="order-button text-uppercase text-center" onclick="nextPrev(1)">
<a onclick="ent();">Select</a>
</div>
</div>
</div>
<!-- Pricing table single -->
<!-- Pricing table single -->
<div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30">
<div class="pricing-table-single white-bg">
<div class="table-category text-center">
<h6>platinum pack</h6>
<h1>$90<span> / month</span></h1>
</div>
<div class="pricing-list text-center">
<ul>
<li>Unlimited Messages</li>
<li>Unlimited Numbers</li>
<li>Null</li>
<li>Null</li>
<li>Null</li>
</ul>
</div>
<div class="order-button text-uppercase text-center" onclick="nextPrev(1)">
<a onclick="payg();">Select</a>
</div>
</div>
</div>
<!-- Pricing table single -->
</div>
<div style="overflow:auto;">
<div>
<button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button>
</div>
</div>
</div>
<div class="tab">
<h3 class="text-center">Finally, Lets take care of payment</h3>
<div class=" pt-25 pb-30 container">
<div class="col-md-5 col-sm-6 ">
<h3>Billing Information</h3>
<!--<div class="choose-us-image">
<img src="images/other/left.png" alt="">
</div>-->
<ul>
<li style="width: 48%"><label>First Name:</label><br><input name="BillingFirstname" type="textt"></li>
<li style="width: 49%"><label style="padding-top:7px;">Last Name:</label><br><input name="BillingLastname" type="textt"></li>
<li style="width: 98%"><label style="padding-top:7px;">Address:</label><br><input Name="Billingaddress" type="textt" class=""></li>
<!-- <li style="width: 65%"><label style="padding-top:7px;">Address 2:</label><br><input type="textt" id="address2" name="adress2" style="display: none;" ></li>-->
<li><label style="padding-top:7px;">City:</label><br> <input style="width:125px; " name="Billingcity" type="textt"></li>
<li ><label style="padding-top:7px;">State:</label><br> <input style="width:65px; " maxlength="2" type="textt" name="BillingState"></li>
<li><label style="padding-top:7px;">Zip Code:</label><br> <input style="width:76px; " type="textt" name="BillingZipcode"></li>
<li style="width: 35%"><label>Phone Number:</label><br><input type="textt" name="BillingPhone"></li>
</ul>
</div>
<div class="col-md-5 col-sm-6 pull-right ">
<h3 >Payment Information</h3>
<ul>
<li><label>Name on Card:</label><br><input type="textt" name="Nameoncard"></li>
<li style="width:187px"><label style="padding-top:7px;">Card Number</label><br><input maxlength="16" type="textt" name="Cardnumber"></li>
<li style="width:26%;padding-right:7px;"><label style="padding-top:7px;">Security Code</label><br><input maxlength="4" type="textt" name="SecurityCode"></li>
<li><label style="padding-top:7px;padding-bottom:8px;">Expiration Date</label><br><div class="custom-select" style="width:101px;" name="Expdate">
<select>
<option value="0">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="10">November</option>
<option value="10">December</option>
</select>
</div></li>
<li><div class="custom-select" style="width:75px;">
<select name="">
<option value="yr">Year</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
<option value="2038">2038</option>
<option value="2039">2039</option>
<option value="2039">2040</option>
</select></div></li>
</ul>
</div>
<!--------Plan Specific-------------------->
<!----------------------------------------------------------------------
<!--------- Plan Specific END------------>
</div>
<div style="overflow:auto;">
<div>
<button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button>
<button type="button" id="nextBtn" value="submit" style="float:right;">Submit</button>
</div>
</div>
</div>
<!-- <div style="overflow:auto;">
<div>
<button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)" style="float:right;">Next</button>
</div>
</div>-->
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:10px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
<div class="" id="containx">
<div action="/action_page.php" id="exampleModal" class="reveal-modal" style="background-color: white;">
<h1>Login</h1>
<label for="email"><b>Email</b></label>
<input type="textt" placeholder="Enter Email" name="email" required>
<label for=""><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="" required>
<button type="submit" class="btn">Login</button>
Back to Sign-Up
</div>
</div>
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the crurrent tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
</script>
<script> let app = new Vue({
el: '#app',
data:{
message: '',
has_number: false,
has_lowercase: false,
has_uppercase: false,
has_special: false,
},
methods: {
password_check: function () {
this.has_number = /\d/.test(this.message);
this.has_lowercase = /[a-z]/.test(this.message);
this.has_uppercase = /[A-Z]/.test(this.message);
this.has_special = /[!##\$%\^\&*\)\(+=._-]/.test(this.message);
}
},
}); </script>

added these to the function details
var paswd= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
inputtxt = document.getElementById("pass")
Also, added this to the validate form function
if(inputtxt.value.match(paswd))
{
valid = true;
}
else
{
document.getElementById("err").innerHTML = ('Your Password did not fulfill requirements listed below');
valid = false;
}
Worked like a charm!
Sources:
https://www.w3resource.com/javascript/password-validation.php
https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_dom

Buttons floating on page and serving as anchors

I'm putting floating buttons on my form to serve as anchors (the page is extensive), but only 1 button appears, but 3 buttons should be displayed.
The goal was when to slide the mouse scroll, to appear one button below the other with Unit 1, Unit 2 and Unit 3, respectively. And by clicking on them, go to their respective sessions. I'm not getting this with the 3 buttons, only with one and this is going to the top of the page.
Move the mouse and see the button (only one that appears)
$(document).ready(function(){
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao1").style.display = "block";
} else {
document.getElementById("navegacao1").style.display = "none";
}
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao2").style.display = "block";
} else {
document.getElementById("navegacao2").style.display = "none";
}
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao3").style.display = "block";
} else {
document.getElementById("navegacao3").style.display = "none";
}
}
function anconrau1() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function anconrau2() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function anconrau3() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
});
.sessao-unidade {
padding-top: 11px;
height: 45px;
display: block;
width: 100%;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.42857143;
text-align: center;
color: #fff;
background-color: rgb(66, 139, 202);
border: 0px solid rgb(177, 177, 177);
margin-bottom: 10px;
}
.sessao-titulos {
display: block;
width: 100%;
color: rgb(27, 80, 124);
background-color: #b4d5f1;
border-color: #357ebd;
padding: 6px 12px;
margin-bottom: 10px;
margin-top: 2px;
font-size: 14px;
font-weight: bold;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border-radius: 2px;
overflow: visible;
text-transform: uppercase;
}
.sessao-titulos:hover, .sessao-titulos:active, .sessao-titulos:visited, .sessao-titulos:focus{
text-decoration: none;
}
.flutuante{
display: none;
position: fixed;
z-index: 9999;
background-color: #e82222;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 2px;
border: none;
font-size: 12px;
}
#navegacao1 {
bottom: 15px;
right: 15px;
}
#navegacao2 {
bottom: 30px;
right: 15px;
}
#navegacao3 {
bottom: 60px;
right: 15px;
}
#navegacao1:hover, #navegacao2:hover, #navegacao3:hover {
background-color: #164b79;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="flutuante" onclick="anconrau1()" id="navegacao1" title="Ir ao topo">Unity 1</a>
<a class="flutuante" onclick="anconrau2()" id="navegacao2" title="Ir ao topo">Unity 2</a>
<a class="flutuante" onclick="anconrau3()" id="navegacao3" title="Ir ao topo">Unity 3</a>
<div id="div-unidades">
<div id="unidade1">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 1
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u1-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Class number:</label>
<input type="number" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-tipo-aula">Classroom Type:</label>
<select name="" id="u1-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<div class="u1-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u1-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u1-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u1-objetivo-forum" id="u1-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u1-ativacao-forum" id="u1-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-avaliacao-forum">Evaluation:</label>
<select name="u1-avaliacao-forum" id="u1-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u1-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u1-peso-forum" id="u1-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u1-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u1-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u1-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u1-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 2 -->
<div id="unidade2">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 2
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u2-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Class number:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-tipo-aula">Classroom Type:</label>
<select name="" id="u2-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u2-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u2-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u2-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u2-objetivo-forum" id="u2-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u2-ativacao-forum" id="u2-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-avaliacao-forum">Evaluation:</label>
<select name="u2-avaliacao-forum" id="u2-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u2-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u2-peso-forum" id="u2-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<!-- Other tools -->
<div class="u2-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u2-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u2-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u2-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 3 -->
<div id="unidade3">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 3
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u3-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Class number:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-tipo-aula">Classroom Type:</label>
<select name="" id="u3-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u3-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u3-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u3-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u3-objetivo-forum" id="u3-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u3-ativacao-forum" id="u3-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-avaliacao-forum">Evaluation:</label>
<select name="u3-avaliacao-forum" id="u3-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u3-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u3-peso-forum" id="u3-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u3-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u3-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u3-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u3-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

The problem here is you are overriding the funcion scrollfunction three times, so the only one which is used is the last defined.
Also you should check the scrollTop value depending on each element as you are comparing for all three functions if the scrollTop value is greater than 20.

Try using $('#navegacao1,#navegacao2,#navegacao3').click(function(){ rather than using separate functions
$(document).ready(function(){
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao1").style.display = "block";
document.getElementById("navegacao2").style.display = "none";
document.getElementById("navegacao3").style.display = "none";
} else if ((document.body.scrollTop > 20 && document.body.scrollTop > 20 )|| (document.body.scrollTop < 30 && document.body.scrollTop < 30)) {
document.getElementById("navegacao2").style.display = "block";
document.getElementById("navegacao1").style.display = "none";
document.getElementById("navegacao3").style.display = "none";
}
else if ((document.body.scrollTop < 30 && document.body.scrollTop > 30 )|| (document.body.scrollTop <50 && document.body.scrollTop <50)) {
document.getElementById("navegacao3").style.display = "block";
document.getElementById("navegacao1").style.display = "none"; document.getElementById("navegacao2").style.display = "none";
}
}
$(function(){
$('#navegacao1,#navegacao2,#navegacao3').click(function(){
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
});
});
.sessao-unidade {
padding-top: 11px;
height: 45px;
display: block;
width: 100%;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.42857143;
text-align: center;
color: #fff;
background-color: rgb(66, 139, 202);
border: 0px solid rgb(177, 177, 177);
margin-bottom: 10px;
}
.sessao-titulos {
display: block;
width: 100%;
color: rgb(27, 80, 124);
background-color: #b4d5f1;
border-color: #357ebd;
padding: 6px 12px;
margin-bottom: 10px;
margin-top: 2px;
font-size: 14px;
font-weight: bold;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border-radius: 2px;
overflow: visible;
text-transform: uppercase;
}
.sessao-titulos:hover, .sessao-titulos:active, .sessao-titulos:visited, .sessao-titulos:focus{
text-decoration: none;
}
.flutuante{
display: none;
position: fixed;
z-index: 9999;
background-color: #e82222;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 2px;
border: none;
font-size: 12px;
}
#navegacao1 {
bottom: 15px;
right: 15px;
}
#navegacao2 {
bottom: 30px;
right: 15px;
}
#navegacao3 {
bottom: 60px;
right: 15px;
}
#navegacao1:hover, #navegacao2:hover, #navegacao3:hover {
background-color: #164b79;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="flutuante" id="navegacao1" title="Ir ao topo">Unity 1</a>
<a class="flutuante" id="navegacao2" title="Ir ao topo">Unity 2</a>
<a class="flutuante" id="navegacao3" title="Ir ao topo">Unity 3</a>
<div id="div-unidades" style="height:1000px">
<div id="unidade1">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 1
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u1-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Class number:</label>
<input type="number" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-tipo-aula">Classroom Type:</label>
<select name="" id="u1-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<div class="u1-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u1-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u1-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u1-objetivo-forum" id="u1-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u1-ativacao-forum" id="u1-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-avaliacao-forum">Evaluation:</label>
<select name="u1-avaliacao-forum" id="u1-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u1-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u1-peso-forum" id="u1-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u1-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u1-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u1-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u1-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 2 -->
<div id="unidade2">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 2
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u2-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Class number:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-tipo-aula">Classroom Type:</label>
<select name="" id="u2-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u2-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u2-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u2-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u2-objetivo-forum" id="u2-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u2-ativacao-forum" id="u2-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-avaliacao-forum">Evaluation:</label>
<select name="u2-avaliacao-forum" id="u2-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u2-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u2-peso-forum" id="u2-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<!-- Other tools -->
<div class="u2-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u2-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u2-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u2-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 3 -->
<div id="unidade3">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 3
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u3-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Class number:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-tipo-aula">Classroom Type:</label>
<select name="" id="u3-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u3-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u3-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u3-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u3-objetivo-forum" id="u3-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u3-ativacao-forum" id="u3-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-avaliacao-forum">Evaluation:</label>
<select name="u3-avaliacao-forum" id="u3-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u3-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u3-peso-forum" id="u3-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u3-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u3-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u3-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u3-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Click on each first child radio (undefined child length)

I would like to click each first child of class="cf" and should be in order, first cf first because the other radio is disabled unless you click the first one. The cf length is undetermined (in this example I put 3) so I need to first get the length of the child of ol > li and loop the clicking there.
Here is the structure of the HTML
<div id="group-attr-selects" class="grouped-select">
<ol>
<li class="opt-label">Dimensions</li>
<div id="conf-container-1549" class="cf">
<div class="optdiv">
<input name="conf-radio-0" id="conf-radio-1461" type="radio" value="1461">
<label class="optdiv-label" for="conf-radio-1461">3" H x 3" W</label>
</div>
<div class="optdiv">
<input name="conf-radio-0" id="conf-radio-1421" type="radio" value="1421">
<label class="optdiv-label" for="conf-radio-1421">4" H x 4" W</label>
</div>
</div>
<div id="err-attribute1549" style="color: red; margin-bottom: 5px"></div>
<li class="opt-label">Color</li>
<div id="conf-container-1379" class="cf">
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12791" type="radio" value="12791">
<label class="optdiv-label" for="conf-radio-12791">Black on Almond</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12796" type="radio" value="12796">
<label class="optdiv-label" for="conf-radio-12796">Black on Brushed Aluminum</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12798" type="radio" value="12798">
<label class="optdiv-label" for="conf-radio-12798">Black on Brushed Brass</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12794" type="radio" value="12794">
<label class="optdiv-label" for="conf-radio-12794">Black on Brushed Gold</label>
</div>
</div>
<div id="err-attribute1379" style="color: red; margin-bottom: 5px"></div>
<li class="opt-label">Mounting Type</li>
<div id="conf-container-2605" class="cf">
<div class="optdiv">
<input name="conf-radio-2" id="conf-radio-76" type="radio" value="76">
<label class="optdiv-label" for="conf-radio-76">Adhesive</label>
</div>
<div class="optdiv">
<input name="conf-radio-2" id="conf-radio-762" type="radio" value="762">
<label class="optdiv-label" for="conf-radio-762">No Mounting</label>
</div>
</div>
<div id="err-attribute2605" style="color: red; margin-bottom: 5px"></div>
</ol>

Got the solution from this answer
I just made a few adjustments.
.findAllByCssSelector('#group-attr-selects > ol > div.cf')
.then(function (elementArray) {
return Promise.all(elementArray.map(function (element) {
return element.getVisibleText()
.then(function (children) {
for(var i=0; i < children.length; i++){
return element.findByCssSelector('.optdiv > input')
.then(function (inp) {
return inp.click();
});
}
});
}));
})

This should work:
jQuery:
$('.cf').each(function(i, item){$(item).find('input[type="radio"]')[0].click()})
JS:
Array.from(document.getElementsByClassName('cf')).forEach(function(item){item.querySelector('input[type="radio"]').checked = true})

Show hidden fields when checkbox is checked?

Hi I have multiple checkboxes of similar kind. I am applying javascript on the checkbox to show hidden fields. I have created a js code which works for a single checkbox, I want to apply a code that will work for all checkboxes.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
JS Code :-
var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
Now the thing is i can make individual javascript for all checkboxes but that will contain numerous js code, I want that a single javascript function can unhide the elements from every checkbox when clicked. A single js code should work for all checkboxes. Kindly please provide a way of doing it with plain javascript or jquery.

Try this
on your check box's onchange event call function onchange="showHiddenField(this)"
and function is like
function showHiddenField(currentObject) {
var inputDiv = $(currentObject).parent().next();
if ($(currentObject).is(":checked")) {
$(inputDiv).show().focus();
}
else {
$(inputDiv).hide();
}
}

Use javascript function to make it.
function toggleFields(boxId, checkboxId) {
var checkbox = document.getElementById(checkboxId);
var box = document.getElementById(boxId);
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
}
toggleFields('box1', 'checkbox1');
toggleFields('box2', 'checkbox2');
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox1" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox2" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

Okay this is how this works, each checkbox will have the id of its box as a class, so that when ever that checkbox is clicked, we will use its class to make its box visible. This will work even if you have 1000 checkboxes
var checkbox = document.querySelectorAll("#check1, #check2");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

Yes you can do this. Solution in below code. i did this using JQuery.
$('input[type="checkbox"]').click(function(){
console.log(this);
// $(this).parent().next().css('display','block');
$(this).parent().next().toggle('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

First Please note down in your mind "id" is only apply on a single elemnt on each page for multiple element you can apply a "class"
id="checkbox" replace with class="checkbox"
in Jquery
$(document).ready(function(){
$(".checkbox").change(function(){
if($(this).prop("checked")){
$(this).parents(".row").find(".box").show();
}else{
$(this).parents(".row").find(".box").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

You can use querySelectorAll("[type='checkbox']") to select all checkbox and iterate through the elements using for loop.
Note : The id should be unique for each element.
var checkbox = document.querySelectorAll("[type='checkbox']");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

The most narrowed (static) suggestion from your code:
$(document).ready(function() {
$('input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});
});
Use class attribute to get dynamic process.

Tested on google Chrome works.
gets id of input takes the number after "checkbox(gets_target)" string. creates a id with adding this number to end of "box"+number string
HTML :
<input onChange="display_hidden_field(this)" id="checkbox2" type="checkbox">
<div id="box2" style="display:none;">content</div>
Javascript :
function display_hidden_field(checkbox){
var box_id = checkbox.id;
var search_pattern = /checkbox(.*?)$/g;
var number = search_pattern.exec(box_id);
number = number[1];
box_id = 'box'+number;
var box = document.getElementById(box_id);
if(checkbox.checked){
box.style.display = 'block';
}else{
box.style.display = 'none';
}
}

You can use code like this what i did in this your every checkbox id create like this "checkbox_1" and your box id like this box_1 and so on other numbers please check below code you will get idea what you need to do with your html and java script.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_1" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_2" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
<script>
function myfunction(obj)
{
var element_index = obj.id.split("_");
console.log('box_'+element_index[1]);
var box = document.getElementById('box_'+element_index[1]);
if(obj.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
}
</script>
Here in script i have given function name myfunction but you can set your function name as per your need. may this is helpful for you.