We Keep Coding

count the active classes on both choices

I'm working on 2 selections, that adds active class on click and add disabled class on the opposite selection. My problem is how get the count of classes exist on both selection ex. selection1 = 1 and selection2 = 5. Also my counting and display of result is off.
Hope you help me thanks.
$('.numChoice > .col-md-5ths > .num').on("click", function() {
var idx = $(this).parent().index();
var act = $(this).is(".active");
var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
$(this).toggleClass('active');
$otherElement.toggleClass('disabled', !act);
var len1 = $otherSide.find('.active').length;
var len2 = $(this).closest('.numChoice').find('.active').length;
console.log('selection1: ' + len1, 'selection2: ' + len2);
});
.numChoice {
display: block;
}
.num {
width: 20px;
height: 20px;
background-color: #DDD;
text-align: center;
float: left;
cursor: pointer;
}
.num.active {
color: green;
}
.num.disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="numChoice first-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
<br><br>
<div class="numChoice second-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
</div>

If I understand, you want to count the active classes for the first row against the second row:
const firstRowActiveLabels = $('.numChoice.first-row .active').length;
const secondRowActiveLabels = $('.numChoice.second-row .active').length;
.numChoice.first-row means: get the class that has numChoice and has first-row classes.
.active means: and get the inner elements that has active class.
$('.numChoice > .col-md-5ths > .num').on("click", function() {
var idx = $(this).parent().index();
var act = $(this).is(".active");
var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
$(this).toggleClass('active');
$otherElement.toggleClass('disabled', !act);
var len1 = $('.numChoice.first-row .active').length;
var len2 = $('.numChoice.second-row .active').length;
console.log('selection1: ' + len1, 'selection2: ' + len2);
});
.numChoice {
display: block;
}
.num {
width: 20px;
height: 20px;
background-color: #DDD;
text-align: center;
float: left;
cursor: pointer;
}
.num.active {
color: green;
}
.num.disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="numChoice first-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
<br><br>
<div class="numChoice second-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
</div>

I've rewritten your JS part a bit. Please check if it's what you're looking for.
$('.numChoice .num').on("click", function() {
if ($(this).hasClass('disabled')){
return false; // let's skip disabled items?
}
var idx = $(this).parent().index();
$(this).toggleClass('active');
var act = $(this).is(".active");
const $others = $(this).closest(".numChoice").siblings();
$others.each(function(){
const $opposite = $(this).find('.num').eq(idx);
$opposite.removeClass('active').toggleClass('disabled', act);
});
updateCounts();
});
function updateCounts(){
const len1 = $('.first-row .active').length;
const len2 = $('.second-row .active').length;
console.clear();
console.log('selection1: ' + len1, 'selection2: ' + len2);
}
.numChoice {
display: block;
}
.num {
width: 20px;
height: 20px;
background-color: #DDD;
text-align: center;
float: left;
cursor: pointer;
}
.num.active {
color: green;
}
.num.disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="numChoice first-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
<br><br>
<div class="numChoice second-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
</div>

How to make a form responsive

I have designed a contact form, I tried to make it responsive but I am stuck. I have tried with css but it's still not responsive. Even panel panel-heading also looks awkward in my responsive mode. I tried to put a toggle on navbar to make it collapse but it's not working. I have imported external bootstrap.min.css and bootstrap.min.js in my code. please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container ">
<a href="# " class="navbar-brand ">
<img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a>
<center> <p class="navbar-text "> Ticker </p></center>
<p class="navbar-text pull-left "> <a href=" " ></a></p>
<p class="navbar-text pull-right ">Logout</p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';>HT /Create </h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+#infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example#infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>

you have to add the script that I added
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Take a look here:https://www.w3schools.com/bootstrap/default.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container ">
<a href="# " class="navbar-brand ">
<img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a>
<center> <p class="navbar-text "> Ticker </p></center>
<p class="navbar-text pull-left "> <a href=" " ></a></p>
<p class="navbar-text pull-right ">Logout</p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';>HT /Create </h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+#infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example#infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>

This should do it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
.form-group{
padding: 15px;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a href="#" class="navbar-brand ">
<img src="https://www.icon.com.mt/wp-content/themes/icon/img/logo.svg" height="30" width="202" class="pull-left "></a>
<center> <p class="navbar-text pull-right"> Ticker </p></center>
<p class="navbar-text pull-right"> <a href="" >Banner</a></p>
<p class="navbar-text pull-right">Logout</p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';>HT /Create </h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+#infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example#infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-lg pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container ">
<a href="# " class="navbar-brand ">
<img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a>
<center> <p class="navbar-text "> Ticker </p></center>
<p class="navbar-text pull-left "> <a href=" " ></a></p>
<p class="navbar-text pull-right ">Logout</p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';>HT /Create </h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+#infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example#infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<!--<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>-->
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<!--<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>-->
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<!--<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>-->
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>
The issue was with "row" which you have added with style= "visibility: hidden". Use "display" property of CSS to show/hide any component in HTML. Visibility CSS property hides the visibility of HTML tag but the area covered by component still remains as it is.
I have added all such "row" in comments and the issue was resolved. Hope this helps you.

Class does exist but is not found

I am absolutely baffled bu this. Here's my CSS:
$(window).load(function(){
$('.zichtbaar').removeClass('zichtbaar').addClass('verborgen');
$('#zoekitem').focus();
$('.letter').on('click', function(){
$('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
var letter = $(this).text();
var klasse = "LETTER-" + letter;
var el = $('.' + klasse);
alert(klasse + " - " + el.length);
$('#alfabet-header').html(letter);
el.addClass('zichtbaar').removeClass('verborgen');
});
});
#zoekitem{
font-size: 1.3em;
}
#letter-header{
height: 32px;
color: royalblue;
font-size: 1.5em;
font-weight: bold;
overflow: hidden;
}
.letter{
float: left;
width: 3.7037037037037%;
cursor: pointer;
text-align: center;
}
#alfabet-header{
font-size: 5em;
font-weight: bold;
}
.inhoud{
margin-left: 10%;
}
.verborgen{
display:none;
}
#zoek-header{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="letter-header">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">​C</div>
<div class="letter">​​D</div>
<div class="letter">​E</div>
<div class="letter">F</div>
<div class="letter">​G</div>
<div class="letter">​H</div>
<div class="letter">​​I</div>
<div class="letter">J</div>
<div class="letter">​​K</div>
<div class="letter">L</div>
<div class="letter">​M</div>
<div class="letter">​N</div>
<div class="letter">O</div>
<div class="letter">​P</div>
<div class="letter">​Q</div>
<div class="letter">​R</div>
<div class="letter">​S</div>
<div class="letter">T</div>
<div class="letter">​U</div>
<div class="letter">V</div>
<div class="letter">​W</div>
<div class="letter">​X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>
</div>
<br/>
<div>
<div id="alfabet-header"></div>
<div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>
<div class="inhoud LETTER-A verborgen">Appels</div>
<div class="inhoud LETTER-B verborgen">Boerenkool</div>
<div class="inhoud LETTER-B verborgen">Bonen</div>
<div class="inhoud LETTER-B verborgen">Bosbessen</div>
<div class="inhoud LETTER-C verborgen">Citrus</div>
<div class="inhoud LETTER-K verborgen">Kappertjes</div>
<div class="inhoud LETTER-T verborgen">Tuinbonen</div>
<div class="inhoud LETTER-W verborgen">Witte kool</div>
</div>
When I click A, B, or T everything is fine; The alert shows the number of elements that have the classname that I'm looking for and displays them. But when I click C, K or W, the elements, although they clearly exist, are not found.
I haven't got the palest shade of a clue as to why this happens.

You've got a lot of Unicode zero-width space characters in your HTML source, and in particular there's one at the beginning of the text for the "C" box. When you access the .text() of the element, therefore, it's not just "C".

i just inspect the element. here i found the solution:

From #Pointy anwswer, you can remove these zero space, without changing the view. The srcipt to remove these space is .replace(/\u200B/g,'');
So your script will be like int his snippet
$(window).load(function () {
$('.zichtbaar').removeClass('zichtbaar').addClass('verborgen');
$('#zoekitem').focus();
$('.letter').on('click', function () {
$('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
var letter = '' + $(this).text().replace(/\u200B/g,'');
var klasse = "LETTER-" + letter;
var el = $('.' + klasse);
alert(klasse + " - " + el.length);
$('#alfabet-header').html(letter);
el.addClass('zichtbaar').removeClass('verborgen');
});
});
#zoekitem{
font-size: 1.3em;
}
#letter-header{
height: 32px;
color: royalblue;
font-size: 1.5em;
font-weight: bold;
overflow: hidden;
}
.letter{
float: left;
width: 3.7037037037037%;
cursor: pointer;
text-align: center;
}
#alfabet-header{
font-size: 5em;
font-weight: bold;
}
.inhoud{
margin-left: 10%;
}
.verborgen{
display:none;
}
#zoek-header{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="letter-header">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">​C</div>
<div class="letter">​​D</div>
<div class="letter">​E</div>
<div class="letter">F</div>
<div class="letter">​G</div>
<div class="letter">​H</div>
<div class="letter">​​I</div>
<div class="letter">J</div>
<div class="letter">​​K</div>
<div class="letter">L</div>
<div class="letter">​M</div>
<div class="letter">​N</div>
<div class="letter">O</div>
<div class="letter">​P</div>
<div class="letter">​Q</div>
<div class="letter">​R</div>
<div class="letter">​S</div>
<div class="letter">T</div>
<div class="letter">​U</div>
<div class="letter">V</div>
<div class="letter">​W</div>
<div class="letter">​X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>
</div>
<br/>
<div>
<div id="alfabet-header"></div>
<div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>
<div class="inhoud LETTER-A verborgen">Appels</div>
<div class="inhoud LETTER-B verborgen">Boerenkool</div>
<div class="inhoud LETTER-B verborgen">Bonen</div>
<div class="inhoud LETTER-B verborgen">Bosbessen</div>
<div class="inhoud LETTER-C verborgen">Citrus</div>
<div class="inhoud LETTER-K verborgen">Kappertjes</div>
<div class="inhoud LETTER-T verborgen">Tuinbonen</div>
<div class="inhoud LETTER-W verborgen">Witte kool</div>
</div>

Your problem is also solved if you copy my letter-header div here: these are free of NULL bytes.
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
<div class="letter">F</div>
<div class="letter">G</div>
<div class="letter">H</div>
<div class="letter">I</div>
<div class="letter">J</div>
<div class="letter">K</div>
<div class="letter">L</div>
<div class="letter">M</div>
<div class="letter">N</div>
<div class="letter">O</div>
<div class="letter">P</div>
<div class="letter">Q</div>
<div class="letter">R</div>
<div class="letter">S</div>
<div class="letter">T</div>
<div class="letter">U</div>
<div class="letter">V</div>
<div class="letter">W</div>
<div class="letter">X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>

Removed unwanted Unicode characters.. check below snippet
$(window).load(function(){
$('.zichtbaar').removeClass('zichtbaar').addClass('verborgen');
$('#zoekitem').focus();
$('.letter').on('click', function(){
$('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
var letter = $(this).text();
var klasse = "LETTER-" + letter;
var el = $('.' + klasse);
alert(klasse + " - " + el.length);
$('#alfabet-header').html(letter);
el.addClass('zichtbaar').removeClass('verborgen');
});
});
#zoekitem{
font-size: 1.3em;
}
#letter-header{
height: 32px;
color: royalblue;
font-size: 1.5em;
font-weight: bold;
overflow: hidden;
}
.letter{
float: left;
width: 3.7037037037037%;
cursor: pointer;
text-align: center;
}
#alfabet-header{
font-size: 5em;
font-weight: bold;
}
.inhoud{
margin-left: 10%;
}
.verborgen{
display:none;
}
#zoek-header{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="letter-header">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
<div class="letter">F</div>
<div class="letter">G</div>
<div class="letter">H</div>
<div class="letter">I</div>
<div class="letter">J</div>
<div class="letter">K</div>
<div class="letter">L</div>
<div class="letter">M</div>
<div class="letter">N</div>
<div class="letter">O</div>
<div class="letter">P</div>
<div class="letter">Q</div>
<div class="letter">R</div>
<div class="letter">S</div>
<div class="letter">T</div>
<div class="letter">U</div>
<div class="letter">V</div>
<div class="letter">W</div>
<div class="letter">X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>
</div>
<br/>
<div>
<div id="alfabet-header"></div>
<div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>
<div class="inhoud LETTER-A verborgen">Appels</div>
<div class="inhoud LETTER-B verborgen">Boerenkool</div>
<div class="inhoud LETTER-B verborgen">Bonen</div>
<div class="inhoud LETTER-B verborgen">Bosbessen</div>
<div class="inhoud LETTER-C verborgen">Citrus</div>
<div class="inhoud LETTER-K verborgen">Kappertjes</div>
<div class="inhoud LETTER-T verborgen">Tuinbonen</div>
<div class="inhoud LETTER-W verborgen">Witte kool</div>
</div>

Fluid boxes of equal height

I have a problem creating boxes of equal height for bootstrap 3. In the beginning, I had issues with image sizes being different, so I tried hacking it via JS and resizing them on the fly. The problem is that if there is no cache for the image, JS fails and screws up the layout even more. I ended up resizing all images to 700 x 700 pixels, but the problem is still there since the accompanying text might be of various lengths.
I created an example in the fiddle: https://jsfiddle.net/7yqkgm2c/
I am not good with CSS and I am wondering if you will be able to help me with solution.
This is the JS that I used to make all boxes the same height (remove it from the fiddle)
$(document).ready(function () {
//function that calculates height and makes all boxes same height. Issue- imeges that are not cached, screwing up the layout
var heights = $(".thumbnail").map(function () {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".thumbnail").height(maxHeight + 15);
//end same height products
});
This is the result that I want to achieve (or propose your solution if you think you know how to approach it better):

Here is my fiddle: https://jsfiddle.net/vhkmyaf3/18/
Assuming you are in control of the markup, I cleaned up how each product might look:
<div class='product-container col-xs-12 col-sm-6 col-md-3'>
<div class='item'>
<img src='http://placehold.it/700x700' />
<div class='item-text'>
<h5>Product Title</h5>
<p>Product description. Lorem ipsum dolor sit amet.</p>
</div><!-- end of item-text -->
<div class='price-point'>
<div class='price'>$100</div>
<a class='btn btn-info' href='#'>View</a>
</div><!-- end of price-point -->
</div><!-- end of item -->
</div><!-- end of product-container -->
The product-container div is used once for each product, and all product-container divs appear inside a div called items-row. You would repeat the items-row div if you wanted a new row of products, but since you are using bootstrap this isn't strictly necessary as the products should stack.
I only included the basic CSS you would need for the structure, plus a bit of padding/borders etc for clarification. The key CSS to achieve the equalised heights you want is the use of display:flex :
.items-row, .product-container {
display: webkit-box;
display: moz-box;
display: ms-flexbox;
display: webkit-flex;
display: flex;
}
As shown in the example, you would need to cancel the display:flex and replace with display:block for any device where you wish the products to stack in a single-column. The fiddle linked above should demonstrate that your image size and product description can be quite flexible while still maintaining equalised heights.

You can give the product description or title a min-height property. Regardless of how much text they contain, the height will always match up.
I have created a class called "product-description" and given it a min-height of 95 pixels. This only affects the text underneath the title but you can do the same for the product name if you need to.
You can then use media queries to target different sizes and adjust these values accordingly.
HTML:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="categories-list" class="row list-group">
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME VERY LONG LONG LONG LONG LONG LONG</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345grhj 4567u456uy4567g</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here </p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$1</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
padding-top: 70px;
font-size: 12px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
html * {
outline: 0 !important;
}
.ui-pnotify {
padding-top: 70px;
}
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
.glyphicon { margin-right:5px; }
.thumbnail
{
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item.list-group-item
{
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
background: #428bca;
}
.item.list-group-item .list-group-image
{
margin-right: 10px;
}
.item.list-group-item .thumbnail
{
margin-bottom: 0px;
}
.item.list-group-item .caption
{
padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
background: #eeeeee;
}
.item.list-group-item:before, .item.list-group-item:after
{
display: table;
content: " ";
}
.item.list-group-item img
{
float: left;
}
.item.list-group-item:after
{
clear: both;
}
.list-group-item-text
{
margin: 0 0 10px;
}
/* PANEL COLLAPSE */
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
/* PANEL COLLAPSE */
.filters {
max-height:165px;
overflow-y:auto;
}
.bottom_align{
position: absolute;
margin-top: 3px;
margin-bottom: 10;
bottom: 10px;
}
.thumb1 {
width: 250px;
height: 250px;
}
.product-description {
min-height: 95px;
}
JSFiddle

Kendo UI not scrolling up

I am developing and app Using Telerik using Cordova and Kendo UI.
I am having the problem that if I scroll down in a div an then switched to div using a simple display:none on the current scrolled div and a display:block to the new div I want to see that the whole app stays scrolled down and I am having no option for scrolling up I have just got a empty screen.
Here the code I am using:
<body onload="onDeviceReady();logint();">
<div id="tabstrip-home"
data-role="view"
data-title="Login"
data-model="app.loginService.viewModel">
<div id="startupForm" data-role="view" style="display:block;">
<img id="startup" class="startup" src="styles/images/startup.jpg"/>
<input id="closeStartButton" onclick="closeStart();" type="image" src="styles/images/vor.png" name="image" width="40" height="40" style="bottom:0;position:fixed;right:0;">
</div>
<div class="logo-image" id="top" name="top"></div>
<div id="home" data-role="scroller" style="display:none;">
<div id="homeOverview" style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<h3 style="padding-top:5px;">Angemeldet als: <span id="user"></span></h3>
<div id="statsNr" style="display:none;">
<h3 >Zählwerke gesamt: <span id="zaehler"></span></h3>
<h3 style="padding-bottom:5px;">Zählwerke erfasst: <span id="zaehlererfasst"></span></h3>
</div>
</div>
<div id="auftragGeladenUndDa">
<div style="margin-left:10px;">
<button data-role="button" data-bind="click: showTermine" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Termine
</button>
<button data-role="button" data-bind="click: schhin" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Schlüsselliste
</button>
<button data-role="button" data-bind="click: showStats" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Statistik
</button>
<button data-role="button" onclick="test();" data-bind="click: showAbles" style="height: 50px;width: 61%; padding-top: 0.75em; text-align: center;">
Erfassen
</button>
<button id="homeErfass" data-bind="click: showUpload" data-role="button" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Ergebnisse übermitteln
</button>
</div>
</div>
<div id="auftragNichtDa">
<button id="auftrag" onclick="kAuftragLaden();" data-bind="click: geladen" data-role="button" style="width: 90%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">
Neuen Auftrag laden
</button>
</div>
</div>
<div id="hinweiseForm" style="display:none;">
<h3 id="row" style="color:black;">Hinweis und Schlüsselliste</h3>
<table id="hinweis" border="0" style="z-index: 1;background-color:white;margin-left: 10px;margin-right: 10px;margin-bottom:5%;">
<tr>
</tr>
</table>
</div>
<div id="terminForm" data-role="view" style="display:none;">
<h3 id="row" style="color:black;">Termine</h3>
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<p>Keine Termine vorhanden</p>
</div>
</div>
<div id="uploadForm" data-role="view" style="display:none;">
<h3 id="row" style="color:black;">Ergebnisse übermitteln</h3>
<div id="uploadEinheit" style="background-color: rgba(255,255,255,0.5);padding-top:5px;padding-bottom:3px;margin-bottom:3px;margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<input id="theCheckbox" type="checkbox">
</div>
</div>
<div id="statsForm" style="display:none;" >
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<h3 id="row" style="padding-top:5px;">Statistik</h3>
<h3 >Zählwerke gesamt: <span id="zaehlerin"></span></h3>
<h3 style="padding-bottom:5px;">Zählwerke erfasst: <span id="zaehlererfasstin"></span></h3>
</div>
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;padding-top: 10px;">
<ul data-role="listview" data-style="inset" >
<li><div style="color:black;">Ort:</div>
<label>
<select style="color:black;" onchange="onchangeOrt();" id="statOrt"></select>
</label>
</li>
</ul>
<ul data-role="listview" data-style="inset" >
<li>
<div style="color:black;">Strasse</div>
<label>
<select style="color:black;" onchange="onchangeStrasse();" id="statOrt"></select>
</label>
</li>
</ul>
</div>
<div id="savedStrasse"></div>
</div>
<div id="ablesForm" style="display:none;" >
<ul data-role="listview" data-style="inset">
<h3 id="row" style="color:black;margin-bottom: 0;margin-top: 0;">Orte</h3>
<li>
<input id="stift" type="image" src="styles/images/erfassen.png" name="image" width="40" height="40" style="">
<input type="image" src="styles/images/suchen.png" name="image" width="40" height="40" style="">
<input type="image" src="styles/images/foto.png" name="image" width="40" height="40" style="">
<input type="image" src="styles/images/karte.png" name="image" width="40" height="40" style="">
</li>
<li>
<select id="recog" onchange="changeFunc();" style="color:black;left: 0;width: 200px;"> </select>
<select id="2tab" onchange="changeAnz2();" style="margin-right:60px;color:black"><option value="1">K</option><option value="2">Z</option></select>
<select id="alleOffen" onchange="changeAnz2();" style="color:black;"><option value="1">Alle</option><option value="2">Offen</option></select>
</li>
</ul>
<div id="all1" style="font-size: 18pt;height:95%;background-color:white;margin-top: 0;margin-left:25px;margin-right:25px;box-shadow: 3px 3px 20px black;"></div>
<div id="all2" style="font-size: 18pt;height:95%;display:none;"></div>
<div id="all3" style="font-size: 18pt;height:95%;display:none;"></div>
<div id="all4" style="font-size: 18pt;height:95%;display:none;"></div>
</div>
<div id="erfassForm" style="display:none;" >
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;padding-top: 1px;">
<h3 style="color:black;display:none;" id="erfassName"></h3>
<h3 style="color:black;" id="erfassNameAnz"></h3>
<h3 style="color:black;display:none;"id="zaehlerNr"></h3>
<h3 style="color:black;"id="adresse"></h3>
<h3 style="color:black;display:none;"id="erfassStrasse"></h3>
<h3 style="color:black;display:none;"id="erfassHausnr"></h3>
<h3 style="color:black;display:none;"id="zpunktID"></h3>
<h3 style="color:black;display:none;"id="zaehlerID"></h3>
<h3 style="color:black;display:none;" id="ablEin"></h3>
<h3 style="color:black;display:none;" id="gerNR"></h3>
<h3 style="color:black;display:none;" id="AbleserNR"></h3>
<h3 style="color:black;"id="standMin" ></h3>
<h3 style="color:black;"id="standMax" ></h3>
<h3 style="color:black;display:none;" id="plasib"></h3>
<h3 style="color:black;display:none;" id="rebuild"></h3>
<select id="alleOrte" style="color:black;width: 45%;"></select>
<select id="alleAbleser" style="color:black;width: 45%; margin-left:20px;"></select>
<h3 style="color:black;margin-bottom: 0;">Zustandsmeldung</h3>
<select id="alleFehler" style="color:black;"></select>
<h3 style="color:black;margin-bottom: 0;">Aktueller Zählerstand</h3>
<input id="stand" type="stand" style="margin-left: 10px;"/>
<button data-click="reset" onclick="erfassenZae();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">
Erfassen
</button>
</div>
<br><br><br><br><br><br>
<div class="result-area ch50">
<div class="results">
<img style="display:none;margin:5px auto; width:120px; height:120px;" id="smallImage"/>
</div>
<div class="separator"></div>
</div>
</div>
<div id="settings" style="display:none;" >
<div id="adminMS" style="color:black;display:none;">Kennwort
<input id="adminPass" style="text-align:right;width: 150px;color: black;"/>
</div>
<div id="server" style="color:black;">
<p>Sie müssen beim ersten Start einen Server einrichten. Bitte machen Sie dies jetzt!</p>
<p id="infofield"></p>
<p id="os"></p>
<p id="version">2.0.0.6</p>
<div style="display:inline">
<p>Serveradresse:</p>
<input type="text" id="eingabe" style="width: 80%; margin-left: 5px;"/><br>
<button onclick="serverSpeichern();" id="serverTres" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Speichern</button>
</div>
<p>Qualitätsstufe (in Prozent) <input type="text" id="qalID" style="width: 100px; margin-left: 5px;"/><br></p>
<button id="settingsCloseButton" onclick="closet();logint();qalSpeichern();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Ok</button>
</div>
<button id="adminButton" onclick="showServer();" data-role="button" style="display:none;width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Anmelden</button>
</div>
<form data-bind="events: { keyup: checkEnter }" id="logForm" style="background-color: white; padding-top: 1px;margin-left: 10px;margin-right: 10px;height:95%;box-shadow: 3px 3px black;">
<h3 data-bind="invisible: isLoggedIn" style="color:black;font-size:16pt;">Benutzeranmeldung</h3>
<ul data-role="listview" data-style="inset">
<li>
<div style="color:black;margin-left:5px;">Geräte gesamt:
<div style="width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;"></div>
</div>
<label>
</label>
</li>
<li style="top:0;margin-left:5px;">
<div style="color:black;">Geräte abgelesen:
<div style="width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;"></div>
</div>
<label>
</label>
</li>
<li><div style="color:black;margin-left:5px;height: 40px;">Ableser</div>
<label>
<select style="width: 30%;border: 1px solid gray;display: inline-block;float: right;border-radius: 5px;background-color: white;color:black;margin-right: 10px;" onchange="onchangeLogin();" id="Model" type="number" data-bind="value: username"> </select>
</label>
</li>
<li>
<div style="color:black;margin-left:5px;margin-top: 5px;">Kennwort</div>
<label>
<input id="passInput" onkeyup="disableButton();" onclick="cleart();" style="text-align:right;width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;color:black;margin-right: 10px;" type="password" data-bind="value: password"/>
</label>
</li><br>
<li><button id="login" type="submit" data-role="button" data-bind="click: onLogin" value="Login" class="login-button" style="-webkit-border-radius: 5px;background-color: rgba(200,200,200,1.0);box-shadow: 3px 3px black;color:black;float:right;width:30%;">weiter</button></li>
</ul>
<!--<button onclick="settings();serverAnzeigen();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Einstellungen</button>
--><br>
</form>
</div>
<input onclick="openStart();" type="image" src="styles/images/zurueck.png" style="display:none;"name="image" width="40" height="40">
<div data-role="layout" data-id="tabstrip-layout">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<div data-role="footer" >
<div id="footert" style="width: 100%;display:none;">
<input id="closeButton" onclick="showHome();" type="image" src="styles/images/zurueck.png" name="image" width="40" height="40" style="bottom:0;position:fixed;">
<input id="closeHome" onclick="logout();" type="image" src="styles/images/zurueck.png" name="image" width="40" height="40" style="bottom:0;position:fixed;">
<input id="uploadButton" onclick="uploadAll();" type="image" src="styles/images/uebermitteln.png" name="image" width="40" height="40" style="bottom:0;position:fixed;display:none;">
<!--<button id="closeButton" onclick="showHome();" data-click="reset" data-role="button" style="width: 40%; text-align: center;display:none;">Schließen</button>
<button id="erfassButton" data-click="reset" data-bind="click: showErfass" data-role="button" style="display:none; width: 40%; text-align: center;">Ablesen</button>
-->
<input id="settingsButton" onclick="settingsH();" type="image" src="styles/images/einstellungen.png" name="image" width="40" height="40" style="bottom:0;position:fixed;display:none;">
</div>
</div>
</div>
</body>
</html>
No I am for exmaple scrolling down in the div named hinweiseForm and then going back using the following function:
function showHome(){
document.getElementById("ablesForm").setAttribute("style","display:none;");
document.getElementById("hinweiseForm").setAttribute("style","display:none;");
document.getElementById("statsForm").setAttribute("style","display:none;");
document.getElementById("home").setAttribute("style","display:block;");
document.getElementById("erfassForm").setAttribute("style","display:none;");
document.getElementById("uploadForm").setAttribute("style","display:none;");
document.getElementById("terminForm").setAttribute("style","display:none;");
document.getElementById("closeHome").setAttribute("style","display:block;"); document.getElementById("footert").setAttribute("style","position:fixed;bottom:0px;width: 100%;display:block;");
document.getElementById("plasib").innerHTML="";
document.getElementById("closeButton").setAttribute("style","display:none;bottom:0;postion:fixed;");
document.getElementById("uploadButton").setAttribute("style","display:none;");
document.getElementById("settingsButton").setAttribute("style","display:block;bottom:0;margin-left:50px;position:fixed;");
document.getElementById("settings").setAttribute("style","display:none");
//$("#home").data("kendoMobileScroller").reset();
//new kendo.mobile.Application();
//app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout" });
}
I already tried some things like the reset function but either I am not using it right or I need to do it another way. It would be really awesome if you can help me.
Thanks in advance

I use the scrollTo method to scroll to the top of my views.
app.application = new kendo.mobile.Application(document.body, {
layout: "tabstrip-layout"
});
// get the view scroller
var scroller = app.application.view().scroller;
/*
* scroller.scrollTop = The number of pixels that are hidden from view above the
* scrollable area.
*/
if (scroller.scrollTop) {
scroller.scrollTo(0, 0);
}