We Keep Coding

receive multiple div id from .parentsUntil()

Need to find id from multiple div what found by .parentsUntil() method (for a future draw and send ajax)
This is possible to use .parentsUntil for this.
Have script like this
$(document).on('change', ':checkbox', (function(e) {
var prod = $(this).closest("#product");
var productUntilContainer = prod.parentsUntil('.container-fluid');
console.log(productUntilContainer);
/*
if ($(this).is(":checked")) {
prod.remove()
} else {
prod.remove()
}*/
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container-fluid" id="product-list-container">
<div id="progress" class="in-progress">In progress
<div id="18-11-20" class="datess">18-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/7.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №7 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #4 en : 3043
<br> пар #3 en : 9740
<br> пар #3 en : 8907
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1172.00</del></span>
</p>
<p class="product-price">$2211.00</p>
<p class="manufacturer">Manufacturer #1</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="112">
<label class="custom-control-label" for="112"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
<div id="19-11-20" class="datess">19-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/9.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №9 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #3 en : 2853
<br> пар #1 e : 6405
<br> пар #3 en : 2564
<br> пар #1 e : 8738
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1660.00</del></span>
</p>
<p class="product-price">$2653.00</p>
<p class="manufacturer">Manufacture #5</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="114">
<label class="custom-control-label" for="114"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
</div>
<div id="complete" class="complete">Complete
<div id="18-11-20" class="datess">18-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/9.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №9 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #3 en : 2853
<br> пар #1 e : 6405
<br> пар #3 en : 2564
<br> пар #1 e : 8738
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1660.00</del></span>
</p>
<p class="product-price">$2653.00</p>
<p class="manufacturer">Manufacture #5</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="111" checked="">
<label class="custom-control-label" for="111"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
<div id="19-11-20" class="datess">19-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/no_img.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Pr223 №2 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #1 e : Beetle
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$421.00</del></span>
</p>
<p class="product-price">$115.00</p>
<p class="manufacturer">Manufacturer #3</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="113" checked="">
<label class="custom-control-label" for="113"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
</div>
</div>

It's not exactly easy to tell what it is you want to happen, or what problem you're having, but if you want to get a list of ids from your .productsUntil list, take this as an example:
$('button').on('click', function() {
console.log('hello world');
var prod = $(this).closest("#product");
var productUntilContainer = prod.parentsUntil('.container');
console.log(productUntilContainer.length);
const ids = [];
productUntilContainer.each(function() {
ids.push($(this).attr('id'));
});
console.log(ids);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="one">
<div id="two">
<div id="three">
<div id="product">
<button>click</button>
</div>
</div>
</div>
</div>
</div>

How can I delete this bootstrap div

I want to be able to remove a div at the click of a button, the div is a card in bootstrap
this is the div:
$("button").click(function () {
$(this).parent().closest('div').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream" />
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
I want to delete this div when I click the button.
Thanks in advance.

There is a jquery parents() which will find the parent element by passing any selector it will find that element. So here in your example you have to pass class name .col-md-4 OR .card by that selector you can perform any action
$("button").click(function () {
$(this).parents(".col-md-4").hide();
});
.col-md-4{border:1px red solid
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>

Use jQuery#parents method and give the selector which you want to hide.
If you want to remove the content instead of hide, use
For remove
$(this).parents('.col-md-4.col-xs-4').parent().empty();
For hide
$(this).parents('.col-md-4.col-xs-4').hide();
Code
$("button").click(function () {
$(this).parents('.col-md-4.col-xs-4').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix">
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>

Here you go with a solution
$("button").click(function () {
$(this).closest('div[class="col-md-4 col-xs-4"]').slideUp("slow", function(){
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream" />
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
I've used jQuery closest method to get the div and slideUp instead of hide to get the animation.
After slideUp completes it will remove the div (it's a callback).
Hope this will help you.

parent only goes one level up. You should use closest:
$("button").click(function () {
$(this).closest('div.col-md-4.col-xs-4').remove();
});

$("button").click(function () {
$(this).parent('div.card').hide();
});

How to show hide the next div on button click in jquery?

I have design a flight search listing page in HTML.
Now want to show/hide (slidUp/slideDown) the next div on button click.
Here my html markup:
http://qubedns.co.in/codes/design/rnp/flight-listing-1.html
HTML CODE:
<td class="flight-list">
<!-- FLIGHT 1 --->
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airsprite airlogo A10">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- FLIGHT 1 END -->
<!-- FLIGHT 2 -->
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airsprite airlogo A10">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- FLIGHT 2 END -->
</td>
I want to slideUp & SlideDown (Toggle) 'flight-itinerarySummary' div on 'btn-more' on click. Also, if any one 'flight-itinerarySummary' is slideDown, all others rows 'flight-itinerarySummary' will slideUp(hide).
I have include Jquery v2.1.1 at html section.
Plz help me anyone to build this on jquery.

Try this:
$(this).next() gets the next element.
$('.btn text-primary btn-more').click(function () {
$('div.flightitinerarySummary').slideUp();
$(this).next('div.flight-itinerarySummary').slideToggle();
return false;
});

You can check whether element is visible or not and then slide down or slide up the div as following.
$(document).ready(function(e) {
$(".btn-more").click(function(){
$('.flight-itinerarySummary').slideUp();
if($(this).closest('.flight-box').siblings('.flight-itinerarySummary').is(":visible")){
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideUp();
}else{
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideDown();
}
});
});
If you want, you can hide all divs with class flight-itinerarySummary at start by adding following style.
<style>
.flight-itinerarySummary{
display:none;
}
</style>
JSFiddle

You can do this like following
$('.btn-more').click(function() {
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideToggle();
})
UPDATE:
$('.btn-more').click(function() {
var nextItiner = $(this).closest('.flight-box').siblings('.flight-itinerarySummary');
if(nextItiner.is(':visible')){
nextItiner.slideUp();
}
else {
nextItiner.slideDown();
}
$('.flight-itinerarySummary').not(nextItiner[0]).each(function(){
$(this).hide();
});
})

Printing web page using CSS & Bootstrap - Second page margin off

I am using the html posted below
When I print (or print preview) the person div boxes align on page 1 correctly but on all subsequent pages the first person div box is off to the left side.
The person box is on page 2
It looks like if I remove the page-break-inside: avoid from the css this goes away but then the boxes are broken on the page breaks and I want to avoid that.
What am I doing wrong?
.person-box {
border: 1px solid #000000;
padding: 10px;
margin-bottom: 10px;
margin-left: 10px;
cursor: pointer;
page-break-inside: avoid;
}
.FieldName {
font-weight: bold;
padding: 5px;
/*border-bottom: 1px solid black;*/
}
.application-mugshot img {
height: 105px;
width: 105px;
}
span.application-name {
display: block;
font-weight: bold;
font-size: larger;
}
span.application-address,
span.application-phone,
span.application-email {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- META TAGS -->
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=0,width=device-width,height=device-height,initial-scale=1,maximum-scale=1" />
<!-- CSS FILES -->
<link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Styles/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
</style>
</head>
<body>
<!-- HEADER -->
<header id="header-container">
</header>
<!-- MAIN CONTAINER -->
<section class="maincontainer">
<form name="frmMain" id="frmMain">
<div>
</div>
<div id="divMainWrapper" class="MainWrapper">
<div id="divMain" class="Main">
<div id="divContent" class="row">
<div class="row">
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- FOOTER -->
</section>
<!-- JS FILES -->
<script type="text/javascript" src="JavaScripts/jQuery/jquery.js"></script>
<script type="text/javascript" src="JavaScripts/Bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="JavaScripts/Common.js"></script>
<script type="text/javascript" src="JavaScripts/Forms/Application_Summary.js"></script>
</body>
</html>
Here is a zip file that can be downloaded and ran locally in print preview to reproduce the issue:
https://www.dropbox.com/s/t9n0cy06rdo1zt8/PrintProblem.zip?dl=0

the bootstrap grid model does not work the way you implemented it as you can see in the documentation (http://getbootstrap.com/css/#grid)
its always the structure:
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8"></div>
<div class="col-xs-2"></div>
</div>
//and so on
you always need to reach "12" with your colums in each row. In my example it is 1) 6+6 = 12 and 2) 2+8+2=12. You column classes need to fill the 12. Hope it helps

Detecting and using same link

I have a product split into two sections: Image and Description. The image is linked using however the Description is not. since it is dynamic I am wondering how can I get this URL and using JS to assign it to the description box?
<div class="item__media">
<div class="item__image">
<a href="http://prototype.aaa.com" title="" class="product-image item__link">
<img src="http://a4.res.cloudinary.com//image/upload/c_pad,dpr_1.0,f_auto,h_221,q_80,w_303/damson_108170_1_2_2.jpg" alt="image">
</a>
</div>
<div class="item__detail">
<a href="http://prototype.aaa.com" title="Description" class="item__link">
<p class="product-name item__name">Product 15252</p>
</a>
</div> </div></div>
<div class="price-box">
<p class="old-price">
<span class="price-label">Was</span>
<span class="price" id="old-price-7139">
<span class="price"><span class="currency">£</span>179</span> </span>
</p>
<p class="special-price">
<span class="price-label">You Save</span>
<span class="price" id="price-excluding-tax-7139">
<span class="price"><span class="currency">£</span>90</span> </span>
</p>
</div>
<div class="price-range">
<span class="price-label" style="display: none;">From </span><span class="price-label">SHOP FROM</span>
<span class="price"><span class="price"><span class="currency">£</span>89</span></span>
</div>
</div>
</div>
Thanks N