Develop Reference

Bootstrap5 tab content on second tab creates unlimited white space

in my project I want to show statistics for the current month and the current year. To split this statistics I created a card with tabs that split month and year.
The month tab is loaded as default. If i now go on the year tab everything is loading but then it will load unlimited empty "stuff / white data" (I don't know how to explain it better), and you can't use this tab because the site will be bigger and bigger. There is also no error in the
This has first been poped up after I changed alle my charts (chart.js) to an dynamic way that you can go e.g. to the next month or the month before. If I load all charts with "fixed" data then the tab works correctly.
What is the problem?
Actual look:
How it has to be looked:
After some testing i see this:
Code snippet:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-header">
<div>
<ul class="nav nav-pills nav-fill mt-4" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-bs-toggle="tab" href="#Month" role="tab">
<span><strong>Current Month</strong></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#Year" role="tab">
<span><strong>Current Year</strong></span>
</a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="month"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-month" id="last-month"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-month" id="current-month">Current Month</button>
<button class="btn btn-info next-month" id="next-month"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="monthly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="monthy_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="monthly_training_days"></h2>
<h2 class="card-title text-white" id="monthly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="monthy_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="monthly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="Year" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="year"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-year" id="last-year"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-year" id="current-year">Current Year</button>
<button class="btn btn-info next-year" id="next-year"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="yearly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="yearly_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="yearly_training_days"></h2>
<h2 class="card-title text-white" id="yearly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="yearly_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="yearly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

After a lot of researching and reading i found the solution for this problem.
The problem occurs because of the hidden content from the hidden tab, which is realized in Bootstrap via "display: none".
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none; /* this is the problem */
}
To fix this problem you can use height: 0 and overflow-y: hidden to this . Now the charts will stay in place and no empty random space will created.
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}

It will take a little minute to go through that line by line but some of the problem is sure to be your structure of Rows and Columns. I noticed this in the first few lines - Just inside the tab-content is this...
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
With Bootstrap you're not really meant to have the Row's inside the Column's and I think what's happening is that the un-natural layout of the code is creating errors like the one you see. This answer does not discover where your white-space is coming from but I do suspect that fixing the layout of the code will also fix the white-space.

Show middle slide of SWIPER JS API, when page refreshes

By using SWIPER JS API I created an about us page that contains the details of our team. This is a slider actually, and this slider contains five slides and I want the third slide to be shown in the center and the two on the right side and two on left but by default first is shown remaining are below it.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script src="../js/swiper.min.js" defer></script>
<script src="../js/js.js" defer></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<title>About us</title>
</head>
<body>
<header>
<nav class="container-fluid navbar navbar-expand-lg navbar-light border-bottom border-secondary">
<a class="navbar-brand p-0" href="home.html"><img src="../img/bloodbucketLogo.png" width="150" height="65" class="mr-5"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav" style="margin: auto" id="menuBar">
<li class="nav-item active">
<a class="nav-link" href="home.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUS.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faqs.html">FAQ's</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Articles
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">When to donate blood?</a>
<a class="dropdown-item" href="#">Blood diseases</a>
<a class="dropdown-item" href="#">Benefits of donating blood?</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contactUs.html">Contact us</a>
</li>
</ul>
<div class="text-center">
<button type="button" class="btn btn-outline-secondary mr-1"> Login </button>
<button type="button" class="btn btn-secondary">Sign up</button>
</div>
</div>
</nav>
</header>
<main>
<div class="container-fluid ">
<div class="row">
<div class="col-md-12 text-center">
<h1 style="font-family: Oxanium;" class="mt-2">Our Team</h1>
</div>
</div>
</div>
<div class="container-fluid" id="aboutUs">
<div class="row team">
<div class="col-md-12 text-center" title="Swipe right!">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/4.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Ehtisham Ul Haq</h5>
<h6 class="text-primary text-center">Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-official" aria-hidden="true"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/1.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Mohammad Moazam</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/1.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Abdul Rab</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/4.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Hamza Muzaffar</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/4.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Khalil Ahmed</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid bg">
<div class="row bg">
<div class="col-md-12">
<div class="fixed-bottom border-top border-dark bg">
<div class="bg">
<div class="mr-4 text-center bg">
<i class="fa fa-facebook-official" aria-hidden="true"></i> |
<i class="fa fa-twitter" aria-hidden="true"></i> |
<i class="fa fa-instagram" aria-hidden="true"></i> |
<i class="fa fa-linkedin" aria-hidden="true"></i> |
<i class="fa fa-whatsapp" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
API LINK
https://swiperjs.com/demos/240-effect-coverflow.html
The way it shows right now
But, I want to look like this when page reloads
IF NEED any thing or have any confusion please ask, but help me to solve this.

Before
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 300,
modifier: 1,
slideShadows : false,
},
pagination: {
el: '.swiper-pagination',
},
});
After
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
initialSlide:2, //Added this
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 300,
modifier: 1,
slideShadows : false,
},
pagination: {
el: '.swiper-pagination',
},
});

Scrolling is locking on mobile devices

I got an issue with my website when I am trying to scroll website on mobile devices sometimes its locking and even when you slide finger on device website is not moving properly. On desktop scrolling working fine. I tried to find the solution but cant figure out what is wrong.
You can test it with developers tools on 375 px resolution or in mobile devices here
Bootstrap 4 template: NOW UI Kit by Creative Tim
I thought problem is with cookie script but when I disable it by commenting in HTML problem is not solving. I tried to comment parts of my JS file but still not working.
There is my JS Script:
var selectedClass = "";
$(".filter").click(function () {
selectedClass = $(this).attr("data-rel");
$("#gallery").fadeTo(100, 0.1);
$("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation');
setTimeout(function () {
$("." + selectedClass).fadeIn().addClass('animation');
$("#gallery").fadeTo(300, 1);
}, 300);
});
$( "#scrollDown" ).click(function() {
$( "html, body" ).animate({
scrollTop: 600
}, 600, function() {
// Animation complete.
});
});
//Gallery Animations
baguetteBox.run('.grid-gallery', { animation: 'slideIn' });
//Anchor Function
function scrollToAnchor(aid){
let aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top}, 900);
}
//Menu Anchors Animations
$("#lexuslink").click(function() {
scrollToAnchor('lexus');
});
$("#fiatlink").click(function() {
scrollToAnchor('fiat');
});
$("#merclink").click(function() {
scrollToAnchor('merc');
});
$("#homelink").click(function(){
$('html, body').animate({scrollTop: 0}, 900)
});
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
let hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
//E-mail Validation Function
$(".test").hide();
function validateForm() {
const name = document.getElementById('name').value;
if (name == "") {
document.querySelector('.status').innerHTML = "Wypełnij wszystkie pola.";
return false;
}
const email = document.getElementById('email').value;
if (email == "") {
document.querySelector('.status').innerHTML = "Wpisz swój adres email";
return false;
} else {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(email)) {
document.querySelector('.status').innerHTML = "Wpisz poprawny e-mail.";
return false;
}
}
const subject = document.getElementById('subject').value;
if (subject == "") {
document.querySelector('.status').innerHTML = "Wpisz temat wiadomości.";
return false;
}
const message = document.getElementById('message').value;
if (message == "") {
document.querySelector('.status').innerHTML = "Message cannot be empty";
return false;
}
document.querySelector('.status').innerHTML = "Wysyłanie...";
document.getElementById('contact-form').submit();
}
There is my HTML File:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="samochody,do,ślubu,wynajem,lexus,fiat,zabytkowe,klasyczne,mercedes,fiat">
<meta name="author" content="Daniel Mydlarz">
<title>Samochody do ślubu - Oświęcim i okolice</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/now-ui-kit.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="sass/baguetteBox.min.css">
<link rel="stylesheet" type="text/css" href="sass/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="https://fonts.googleapis.com/css?family=Mansalva|Princess+Sofia&display=swap&subset=latin-ext"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="code.js"></script>
</head>
<body class="landing-page sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent" color-on-scroll="300">
<div class="container">
<div class="dropdown button-dropdown d-lg-none">
<a href="#pablo" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown">
<span class="button-bar"></span>
<span class="button-bar"></span>
<span class="button-bar"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-header">MENU</a>
<a class="dropdown-item" href="#lexus">Samochody</a>
<a class="dropdown-item" href="#galeria">Galeria</a>
<a class="dropdown-item" href="#oferta">Oferta</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#kontakt">Kontakt</a>
</div>
</div>
<div class="navbar-translate">
<a class="align-baseline nav-link d-lg-none d-xl-none d-md-none float-left" rel="tooltip"
title="Zadzwon teraz aby dowiedziec sie wiecej" data-placement="bottom" href="tel:792-877-785"
target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse"
data-target="#navigation" aria-controls="navigation-index" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-bar top-bar"></span>
<span class="navbar-toggler-bar middle-bar"></span>
<span class="navbar-toggler-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse fx-start" id="navigation"
data-nav-image="./assets/img/blurred-image-1.jpg">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdownbtn" href="" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Samochody
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMenu">
<a href="#lexus" class="dropdown-item" id="lexuslink" name="itmlexus"
type="button">Lexus</a>
Fiat
<a href="#merc" class="dropdown-item" id="merclink" name="itmmerc"
type="button">Mercedes</a>
</div>
</li>
<li class="nav-item">
Galeria
</li>
<li class="nav-item">
Oferta
</li>
<li class="nav-item">
Kontakt
</li>
<li class="nav-item position-right10">
<a class="nav-link" rel="tooltip" title="Zadzwon teraz aby dowiedziec sie wiecej"
data-placement="bottom" href="tel:792-877-785" target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
</li>
<li class="nav-item position-right">
<a class="nav-link" rel="tooltip" title="Sprawdź nas na Facebook'u" data-placement="bottom"
href="https://www.facebook.com/Samochody-do-Ślubu-Oświęcim-i-okolice-586389625167858"
target="_blank">
<i class="fa fa-facebook-official" style="font-size:34px;color:white"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="wrapper">
<div class="container-fluid p-0" style="overflow:hidden">
<div class="wrapper">
<div class="page-header page-header-small">
<div class="page-header-image" data-parallax="true"
style="background-image: url('img/slub-bg2.jpg')">
</div>
<div class="content-center welcome-text">
<div class="container-fluid landing-text">
<h1 class="h1-respononsive h1-title weird-font">Nowoczesne i klasyczne samochody do ślubu
</h1>
<h3 class="h3-responsive h3-title">Pozwól sobie na odrobinę luksusu...
</h3>
<i class="fa fa-angle-double-down fa-4x arrow-down pb-2" id="scrollDown"
aria-hidden="true"></i>
</div>
</div>
</div>
<main>
<section>
<a name="lexus"></a>
<div class="section pt-2 section-about-us">
<div class="container">
<div class="row" id="lexus">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Nowoczesny Lexus</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/bg-2.jpg" alt="Lexus" class="img-fluid">
</div>
</div>
</div>
<a name="fiat" />
<div class="row" id="fiat">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Zabytkowy Fiat 126p</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/fiat1.jpg" alt="Fiat 126p" class="img-fluid">
</div>
</div>
</div>
<a name="merc" />
<div class="row" id="merc">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Klasyczny Mercedes</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/merc1.jpg" alt="Mercedes" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GALERIA -->
<h2 class="h2-responsive font-weight-bold text-center border-top border-bottom py-2" id="galeria">
Galeria
</h2>
<section class="gallery-block grid-gallery">
<div class="container">
<div class="btn-group-ctn">
<button type="button" class="btn btn-info filter" data-rel="all">Wszystkie</button>
<button type="button" class="btn btn-info filter" data-rel="1">Lexus</button>
<button type="button" class="btn btn-info filter" data-rel="3">Mercedes</button>
<button type="button" class="btn btn-info filter" data-rel="2">Fiat 126p</button>
</div>
<div class="row gallery" id="gallery">
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/1.jpg">
<img class="img-fluid image scale-on-hover" src="./img/1.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/7.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/8.jpg">
<img class="img-fluid image scale-on-hover" src="./img/8.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat01.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat01.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat02.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat02.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat03.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat03.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat04.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat04.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat05.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat05.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat06.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat06.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc7.jpg">
</a>
</div>
</div>
</div>
</section>
</main>
</div>
<h2 id="oferta" class="h2-responsive font-weight-bold text-center border-top border-bottom py-2 my-5">
Oferta</h2>
<section class="pricing py-5">
<div class="container">
<div class="row center-offer">
<!-- Free Tier -->
<div class="col-lg-8">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h6 class="card-price text-center"><span class="period">od</span> 399 <span
class="period">zł</span>
</h6>
<ul class="fa-ul">
<h4 class="text-muted mt-1">Cena zawiera:</h4>
<li>
Wybrany samochód</li>
<li>
Dojazd do domu
Pani młodej oraz Pana młodego</li>
<li>
Dojazd do kościoła
pary młodej
</li>
<li>
Przejazd na
weselną sale
</li>
</ul>
<a href="#kontakt" class="btn btn-block btn-primary text-uppercase">Zapytaj o
wolne terminy</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-4 pt-5 px-1" id="kontakt">
<div class="container">
<!--Section heading-->
<h2 class="h2-responsive font-weight-bold text-center my-4 border-top border-bottom py-2">
Skontaktuj się z nami</h2>
<!--Section description-->
<p class="text-center w-responsive mx-auto mb-5">Masz jakieś pytania? Chcesz dobrać indywidualną
ofertę?
</p>
<div class="row">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5 contact-form">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Twoje imię</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Twój e-mail</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Temat</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message"
placeholder="Witam, interesuję mnie wynajem samochodu w terminie ..."
name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Twoja wiadomość</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left">
<a class="btn btn-submit" onclick="validateForm()">Wyślij</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 text-center kontakt-info">
<ul class="list-unstyled mb-0">
<li>
<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
<p>32-600 Oświęcim, <br>
ul. Zagrodowa 31B</p>
</li>
<li><i class="fa fa-phone mt-4 fa-2x" style="color: black"></i>
<p>+48 792-877-785</p>
</li>
<li>
<i class="fa fa-envelope mt-4 fa-2x" aria-hidden="true" style="color: black"></i>
<p>kodiaqrentacar#gmail.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</div>
</section>
</div>
<!-- Plugins -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?theme=white&always=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.0/baguetteBox.js" async></script>
<!-- Core JS Files -->
<script src="assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/js/mdb.min.js"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="assets\js\plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
</body>
</html>
Maybe someone had similar problem, hope to see some tips from you guys. If you need another script just tell me hope we solve this together.
Best Regards Daniel.

you need to remove below css code form your css file.
.wrapper {
overflow-x: hidden;
}
and also need to update your font size for the element #kontakt p in media query of 576px right now it is 1.1rem you need to reduce it 0.9rem.
I hope after done this two minor changes your scrolling problem will be solved.

Show sum of the dynamic price when click on radio button in jquery

I'm in very bad situation with a project which is related to a travelling website. I'm unable to figure out that how do I calculate the total amount of each passenger's preferred room type.
I've two passenger's records in database.
1) Maggie
2) Esther
The default price for each passenger's is 125000 and when if user click to choose his own room type then price is 150000 for the selected passenger.
Here is the website on which I applying this : Website Tailor Page
It is easy to do when the number of travelers is static but all the
data come from the database. So below in the code I mention the static version of the form.
Here are the complete code, Please help me because I'm unable to figure it out the issue:
$(document).ready(function(){
$('#extraRoomInput_m1').click(function(){
$('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
});
$('#extraRoomInput_f1').click(function(){
$('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
});
var extraRoom1 = $("input[name='extraRoom356a192b7913b04c54574d18c28d46e6395428ab']").val();
var res = parseInt(extraRoom1);
res = res+parseInt(extraRoom1);
$('#extraRoomInput_m2').click(function(){
$('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
});
$('#extraRoomInput_f2').click(function(){
$('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
});
var extraRoom2 = $("input[name='extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0']").val();
var res = parseInt(extraRoom2);
res = res+parseInt(extraRoom2);
// alert(res);
$('#total_price').html(res);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-4" id="p-1">
<h3 class="mb-1">
<i class="fa fa-bed fa-fw"></i>
Maggie's room type
</h3>
<p>Maggie would you like your own room?</p>
<div class="row mb-5">
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_m" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_m1" value="150000">
<p><b>Yes please</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 150000.00 (per person)</p>
<p>You will have your own room</p>
</div>
</div>
</label>
</div>
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_f" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_f1" value="125000" checked="">
<p><b>No thanks</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
<p>You will share a room with another traveller of the same gender</p>
</div>
</div>
</label>
</div>
</div>
<h3 class="mb-1">
<i class="fa fa-bed fa-fw"></i>
Esther's room type
</h3>
<p>Esther would you like your own room?</p>
<div class="row mb-5">
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_m" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_m2" value="150000">
<p><b>Yes please</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 150000.00 (per person)</p>
<p>You will have your own room</p>
</div>
</div>
</label>
</div>
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_f" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_f2" value="125000" checked="">
<p><b>No thanks</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
<p>You will share a room with another traveller of the same gender</p>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="card">
<a class="card-link" data-toggle="collapse" href="#tripInformation">
<div class="card-header text-dark fs-20">
Classic Golden Triangle (CGT)
</div>
</a>
<div id="tripInformation" class="collapse show" data-parent="#tripAccordation">
<div class="card-body p-0">
<ul class="list-group border-0">
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-clock-o"></i> Duration</div>
<div class="col-md-8">6 Nights/7 Days</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-pin"></i> Start</div>
<div class="col-md-8">NEW DELHI, DELHI</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-marker"></i> Finish</div>
<div class="col-md-8">NEW DELHI, DELHI</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-users"></i> Passengers</div>
<div class="col-md-8">
<p>
<i class="fa fa-fw fa-male"></i> Maggie Clarke Schwartz
</p>
<p>
<i class="fa fa-fw fa-female"></i> Esther Ball Clayton
</p>
</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-bed"></i> Room type</div>
<div class="col-md-8 text-right">
<span class="font-weight-bold">
<i class="fa fa-inr"></i> Price (per person)
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="passanger-1"><div class="row px-2 mt-2"><div class="col-md-6">Maggie (Own Room) </div><div class="col-md-6 text-right">INR <i class="fa fa-inr pl-1"></i> <span id="priceOwnRoom"> 150000.00</span></div></div></div>
<div id="passanger-2">
<div class="row px-2 mt-2">
<div class="col-md-6">
Esther (Twin Room)
</div>
<div class="col-md-6 text-right">
INR <i class="fa fa-inr pl-1"></i>
<span id="priceTwinRoom">
125000.00 </span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item active border-0 px-2 fs-20">
<div class="row">
<div class="col-md-4 font-weight-bold">
<i class="fa fa-fw fa-inr"></i> Price
</div>
<div class="col-md-8 text-right">
<i class="fa fa-inr"></i>
<span id="total_price">300000</span>
(per person)
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Show sum of dynamic radio input element and It should also show when click on another radio input element

I'm working on a project where I want to show total price accordingly when extra room option selected by the traveler.
It is easy to do when the number of travelers is static but all the
data come from the database. So below in the code I mention the static version of the form.
Here are the complete code, Please help me because I'm unable to figure it out the issue:
$(document).ready(function(){
$('#extraRoomInput_m1').click(function(){
$('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
});
$('#extraRoomInput_f1').click(function(){
$('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
});
var extraRoom1 = $("input[name='extraRoom356a192b7913b04c54574d18c28d46e6395428ab']").val();
var res = parseInt(extraRoom1);
res = res+parseInt(extraRoom1);
$('#extraRoomInput_m2').click(function(){
$('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
});
$('#extraRoomInput_f2').click(function(){
$('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
});
var extraRoom2 = $("input[name='extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0']").val();
var res = parseInt(extraRoom2);
res = res+parseInt(extraRoom2);
// alert(res);
$('#total_price').html(res);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-4" id="p-1">
<h3 class="mb-1">
<i class="fa fa-bed fa-fw"></i>
Maggie's room type
</h3>
<p>Maggie would you like your own room?</p>
<div class="row mb-5">
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_m" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_m1" value="150000">
<p><b>Yes please</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 150000.00 (per person)</p>
<p>You will have your own room</p>
</div>
</div>
</label>
</div>
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_f" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_f1" value="125000" checked="">
<p><b>No thanks</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
<p>You will share a room with another traveller of the same gender</p>
</div>
</div>
</label>
</div>
</div>
<h3 class="mb-1">
<i class="fa fa-bed fa-fw"></i>
Esther's room type
</h3>
<p>Esther would you like your own room?</p>
<div class="row mb-5">
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_m" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_m2" value="150000">
<p><b>Yes please</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 150000.00 (per person)</p>
<p>You will have your own room</p>
</div>
</div>
</label>
</div>
<div class="col-md-6">
<label class="w-100">
<div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
<div class="text-center">
<input type="radio" class="extraRoomOption_f" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_f2" value="125000" checked="">
<p><b>No thanks</b></p>
<p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
<p>You will share a room with another traveller of the same gender</p>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="card">
<a class="card-link" data-toggle="collapse" href="#tripInformation">
<div class="card-header text-dark fs-20">
Classic Golden Triangle (CGT)
</div>
</a>
<div id="tripInformation" class="collapse show" data-parent="#tripAccordation">
<div class="card-body p-0">
<ul class="list-group border-0">
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-clock-o"></i> Duration</div>
<div class="col-md-8">6 Nights/7 Days</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-pin"></i> Start</div>
<div class="col-md-8">NEW DELHI, DELHI</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-marker"></i> Finish</div>
<div class="col-md-8">NEW DELHI, DELHI</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-users"></i> Passengers</div>
<div class="col-md-8">
<p>
<i class="fa fa-fw fa-male"></i> Maggie Clarke Schwartz
</p>
<p>
<i class="fa fa-fw fa-female"></i> Esther Ball Clayton
</p>
</div>
</div>
</li>
<li class="list-group-item header-bg-dull border-0 px-2">
<div class="row">
<div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-bed"></i> Room type</div>
<div class="col-md-8 text-right">
<span class="font-weight-bold">
<i class="fa fa-inr"></i> Price (per person)
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="passanger-1"><div class="row px-2 mt-2"><div class="col-md-6">Maggie (Own Room) </div><div class="col-md-6 text-right">INR <i class="fa fa-inr pl-1"></i> <span id="priceOwnRoom"> 150000.00</span></div></div></div>
<div id="passanger-2">
<div class="row px-2 mt-2">
<div class="col-md-6">
Esther (Twin Room)
</div>
<div class="col-md-6 text-right">
INR <i class="fa fa-inr pl-1"></i>
<span id="priceTwinRoom">
125000.00 </span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item active border-0 px-2 fs-20">
<div class="row">
<div class="col-md-4 font-weight-bold">
<i class="fa fa-fw fa-inr"></i> Price
</div>
<div class="col-md-8 text-right">
<i class="fa fa-inr"></i>
<span id="total_price">300000</span>
(per person)
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I haven't looked at all the code, but you seem to be setting up event handlers for the buttons. This is an asynchronous action that will fire when the button is pressed. However your total price is not wanting for the event to fire so won't be affected. You need to put the total price calculation in the callback function of the event. This is a common Javascript mistake because the asynchronous nature is tricky to understand. There is lots of material on the web to explain this - make sure you understand the concepts and don't try to cut and paste code
In the second res calculation you are overwriting the res value calculated for extra room1 instead of adding the values together. To make it clearer, call the first res something like extraRoom1Total and the second extraRoom2Total and then add them together. This will make the code easier to understand and therefore easier to debug and maintain