We Keep Coding

how to float divs when using search filter bootstrap

I have created a gallery that gets filtered two ways. One by click of a button and the other with a search filter. Filters are working perfectly, except when divs are hidden on filter the remaining showing divs do not float next to each other.
this is what it looks like before filtered:
After filtering this is what it looks like:
How can I get it all of dancer2 to be next to each other and only start a new row every 4 dancers?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".column").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
.column {
float: right;
display: none;
/* Hide columns by default */
}
.content {
background-color: white;
padding: 10px;
text-align: center;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row container" style="margin: auto;">
<div class="col-sm-4">
<input type="text" id="myInput" placeholder="Search for names..">
</div>
<div class="col-sm-8" style="text-align: right;">
<div id="myBtnContainer" class="container" style="padding-bottom: 2rem;">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('teachera')"> teachera</button>
<button class="btn" onclick="filterSelection('teacherb')"> teacherb</button>
<button class="btn" onclick="filterSelection('teacherc')"> teacherc</button>
</div>
</div>
</div>
<!--DANCER GALLERY-->
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer1" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer2" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer3" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer4" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teachera</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer1a" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer2a" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer3a" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer4a" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teacherb</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer1b" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer2b" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer3b" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer4b" style="width:80%; height: 200px;">
<h4 class="dancerName">Dancer4</h4>
<p>teacherc</p>
</div>
</a>
</div>
</div>

When you declare a new div with the "row" class it will start a new row. If you want all of those elements to show side-by-side, they should all be in the same "row" div. The bootstrap styles will automatically keep a maximum of 4 pictures side-by-side and wrap to a new row (because you have col-sm-3 as the class for the individual pictures). Bootstrap rows go up to 12 units long. Each time a new element is added, if it exceeds the 12, it will wrap to the next line.

Using more than one div on show/hide

This is related to my original Question, which was solved: JavaScript show/hide divs
So I have gone with Fadi's answer on the original question and it works perfectly. How would I be able to use two div's for the same data-collaboration category?
I want to have teams show up under "Collaborate Socially" and "Collaborate on Files" - the categories "project, files, socially" are all using the data-decision definition.
I've tried adding two data-decision="projects" data-decision="socially" in one div and it didn't work.
<div class="outer-container">
<div class="row">
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="projects" class="decisionTreeBox collabProjects" style="font-size: x-large;">
Collaborate on Projects</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="files" class="decisionTreeBox collabFiles" style="font-size: x-large;">
Collaborate on Files</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="socially" class="decisionTreeBox collabSocially" style="font-size: x-large;">
Collaborate Socially</div>
</div>
</div>
<hr />
<div class="container" style="padding: 0px;">
<div class="row">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="files" id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
</div></a>
<!-- <a href="/TrainingResourceCenter/O365Training/Pages/O365.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
</div></a> -->
<a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="files" id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
</div></a>
<a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="socially" id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
</div></a>
<a href="/TrainingResourceCenter/O365Training/Pages/Planner.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="projects" id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
</div></a>
<a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="socially" id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
</div></a>
</div>
</div>
</div>
<script>
function projectCollab(){
var divsToCange = document.querySelectorAll('[data-decision]'),
attr = this.getAttribute('data-collaborate');
for(var i = 0; i < divsToCange.length; i++){
var d = divsToCange[i];
if(d.getAttribute('data-decision') == attr) {
d.parentNode.style.display ='block' ;
}
else{
d.parentNode.style.display = 'none';
}
}
return false;
}
var divButtons = document.querySelectorAll('[data-collaborate]');
for(var i = 0; i < divButtons.length; i++){
divButtons[i].addEventListener('click', projectCollab);
}
</script>

This fix comes easy once you have started with data attributes
2 sides of the solution
HTML
You will be able to stack the values separated by a space
data-decision="socially files"
JS
For the HTML to work, we will change your if statement where you checked if the data attribute was the same as the once selected. Now we are going to validate if the data attribute includes the once selected.
This was your if statement
if(d.getAttribute('data-decision') == attr)
This is the new if statement
if (d.getAttribute('data-decision').includes(attr))
Hope this helps :>
function projectCollab() {
var divsToCange = document.querySelectorAll('[data-decision]'),
attr = this.getAttribute('data-collaborate');
for (var i = 0; i < divsToCange.length; i++) {
var d = divsToCange[i];
if (d.getAttribute('data-decision').includes(attr)) {
d.parentNode.style.display = 'block';
} else {
d.parentNode.style.display = 'none';
}
}
return false;
}
var divButtons = document.querySelectorAll('[data-collaborate]');
for (var i = 0; i < divButtons.length; i++) {
divButtons[i].addEventListener('click', projectCollab);
}
<div class="outer-container">
<div class="row">
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="projects" class="decisionTreeBox collabProjects" style="font-size: x-large;">
Collaborate on Projects</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="files" class="decisionTreeBox collabFiles" style="font-size: x-large;">
Collaborate on Files</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="socially" class="decisionTreeBox collabSocially" style="font-size: x-large;">
Collaborate Socially</div>
</div>
</div>
<hr />
<div class="container" style="padding: 0px;">
<div class="row">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="files" id="decisionTreeOneDrive">
<h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />OneDrive</h3>
</div>
</div>
</a>
<!-- <a href="/TrainingResourceCenter/O365Training/Pages/O365.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
</div></a> -->
<a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="files" id="decisionTreeSharePoint">
<h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />SharePoint</h3>
</div>
</div>
</a>
<a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="socially files" id="decisionTreeTeams">
<h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Teams</h3>
</div>
</div>
</a>
<a href="/TrainingResourceCenter/O365Training/Pages/Planner.aspx">
<div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="projects" id="decisionTreePlanner">
<h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Planner</h3>
</div>
</div>
</a>
<a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx">
<div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="socially" id="decisionTreeYammer">
<h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Yammer</h3>
</div>
</div>
</a>
</div>
</div>
</div>
<script>
</script>

How do I have this code adjusted using js, html and css to have a default collapsed view?

Here is the full code and it has js, css and html. I got this from an online snippet and I am not good with Javascript. Please help!!!
I have this posed on my home page and taking up the space, would be great to have it all collapsed.
$(document).on('click', '.panel-heading span.clickable', function(e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.closest('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.closest('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
})
.row {
margin-top: 40px;
padding: 0 10px;
}
.clickable {
cursor: pointer;
}
.panel-heading span {
margin-top: -20px;
font-size: 15px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel 2</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel 3</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel 4</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">Panel content</div>
</div>
</div>
</div>
</div>

Add this in your css: .closeThisPanel{ display:none; }
Add the closeThisPanel class to the panel-body div.
Add the panel-collapsed class the the clickable span.
Change the icon from glyphicon glyphicon-chevron-up to glyphicon glyphicon-chevron-down
$(document).on('click', '.panel-heading span.clickable', function(e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.closest('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.closest('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
})
.row {
margin-top: 40px;
padding: 0 10px;
}
.clickable {
cursor: pointer;
}
.panel-heading span {
margin-top: -20px;
font-size: 15px;
}
.closeThisPanel{
display:none;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel 2</h3>
<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
</div>
<div class="panel-body closeThisPanel">Panel content</div>
</div>
</div>
</div>
</div>

Unable to loop through child elements of a div

My Code is like this
$(document).ready(function() {
$('.slides').children('.item').each(function() {
var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop
tTimer = $(this).find('.timer');
alert(tTimer);
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="content apc banner no-padding" id="pos_1197">
<div class="slides slick-initialized slick-slider slick-dotted" role="toolbar">
<div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i>
</div>
<div aria-live="polite" class="slick-list draggable" style="height: 550px;">
<div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;">
<div class="item myclass medium c5-bg odd slick-slide slick-current slick-active" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home">
</div>
<div class="table-cell">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a>
</p>
<h2 class="timer"></h2>
<input id="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0">
</div>
</div>
</div>
</div>
<div class="item myclass medium c5-bg even slick-slide" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;"
data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home2">
</div>
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a>
</p>
<h2 class="timer"></h2>
<input id="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1">
</div>
</div>
</div>
</div>
</section>
Everything looks okay to me, but for some reason the loop is not working and I am not getting anything as Alert message. Can any one let me know what I am doing wrong here?

The id should be unique in your code so use class instead otherwise only the first element with the id can access. Although you need to use find() method instead of children() since it only selects direct child and .item is not the direct child.
$(document).ready(function() {
$('.slides').find('.item').each(function() {
var tValue = $(this).find('.campaignValidity').val();
tTimer = $(this).find('.timer');
alert(tValue);
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="content apc banner no-padding" id="pos_1197">
<div class="slides slick-initialized slick-slider slick-dotted" role="toolbar">
<div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i>
</div>
<div aria-live="polite" class="slick-list draggable" style="height: 550px;">
<div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;">
<div class="item myclass medium c5-bg odd slick-slide slick-current slick-active" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home">
</div>
<div class="table-cell">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a>
</p>
<h2 class="timer"></h2>
<input class="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0">
</div>
</div>
</div>
</div>
<div class="item myclass medium c5-bg even slick-slide" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;"
data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home2">
</div>
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a>
</p>
<h2 class="timer"></h2>
<input class="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1">
</div>
</div>
</div>
</div>
</section>

You selector is not able to select the .item div properly. You can always debug such issues by doing console.log() and check in the develop console.
As a resolution you can check for .item class div inside the .slides context like below.
$(document).ready(function() {
var context = $('.slides');
$('.item',context).each(function() {
var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop
console.log(tValue);
tTimer = $(this).find('.timer');
alert(tTimer);
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="content apc banner no-padding" id="pos_1197">
<div class="slides slick-initialized slick-slider slick-dotted" role="toolbar">
<div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i>
</div>
<div aria-live="polite" class="slick-list draggable" style="height: 550px;">
<div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;">
<div class="item myclass medium c5-bg odd slick-slide slick-current slick-active" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home">
</div>
<div class="table-cell">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a>
</p>
<h2 class="timer"></h2>
<input id="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0">
</div>
</div>
</div>
</div>
<div class="item myclass medium c5-bg even slick-slide" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;"
data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home2">
</div>
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a>
</p>
<h2 class="timer"></h2>
<input id="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1">
</div>
</div>
</div>
</div>
</section>

Try this one:
$(document).ready(function() {
$('.slides').find('.item').each(function() {
var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop
alert(tValue);
tTimer = $(this).find('.timer');
alert(tTimer);
});
});

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