Bootstrap Product Carousel Overflow? - javascript

I am having trouble with my Bootstrap Product Carousel. I have come across a issue where the last item gets pushed down in my carousel. example here http://codepen.io/riwakawebsitedesigns/pen/Kibrk/?editors=111 http://codepen.io/riwakawebsitedesigns/full/Kibrk/
I would like it to be able to slide line no matter how many items I have.
Also on mobile view just to display one item and slides to next item.
<div class="container" id="masterhead">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs">
<div class="column-left">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div><!-- /. Column-left -->
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="content">
<div class="module-heading">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 pull-left">
<div class="module-title">
<h3>Featured Products</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">
<div class="controls hidden-xs text-right">
<a class="left fa fa-chevron-left btn btn-default" href="#carousel-example" data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-default" href="#carousel-example" data-slide="next"></a>
</div><!-- /. Controls -->
</div>
</div>
</div><!-- /. Module-Heading -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product Example</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Next Sample Product</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Grouped Product</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /. Content -->
</div><!-- /. Content Columns -->
</div>
</div><!-- /. Container -->
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.module-heading {
font-size: 16px;
text-transform: uppercase;
font-family: "Lucida Grande","Lucida Sans Unicode",Calibri,sans-serif;
font-weight: 700;
margin-top: 0;
padding-bottom: 5px;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 10px;
}
.module-title {
background: #CCCCCC;
}
.module-title h3 {
margin: 0;
padding: 0;
}
.controls {
background: #DFDFDF;
margin: 0;
padding: 0;
}
.col-item {
border: 1px solid #E1E1E1;
border-radius: 5px;
background: #FFF;
}
.col-item .photo img {
}
.col-item .info {
padding: 10px;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
.col-item:hover .info {
background-color: #F5F5DC;
}
.col-item .price {
float: left;
margin-top: 5px;
}
.col-item .price h5 {
line-height: 20px;
margin: 0;
}
.price-text-color {
color: #219FD1;
}
.col-item .info .rating {
color: #777;
}
.col-item .rating {
float: left;
font-size: 17px;
text-align: right;
line-height: 52px;
margin-bottom: 10px;
height: 52px;
}
.col-item .separator {
border-top: 1px solid #E1E1E1;
}
.col-item .separator p {
line-height: 20px;
margin-bottom: 0;
margin-top: 10px;
text-align: center;
}
.col-item .separator p i {
margin-right: 5px;
}
.col-item .btn-add {
width: 50%;
float: left;
}
.col-item .btn-add {
border-right: 1px solid #E1E1E1;
}
.col-item .btn-details {
width: 50%;
float: left;
padding-left: 10px;
}


It depends on the number of elements in the . So you have to modify your script to add only three items in this tag.
Try with this code :
<div class="container" id="masterhead">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs">
<div class="column-left">
<ul class="list-group">
<li class="list-group-item"><div class="list-heading"><h4>Categories</h4></div></li>
<li class="list-group-item">Computer Packages</li>
<li class="list-group-item">Hard Drives</li>
<li class="list-group-item">Software</li>
<li class="list-group-item">Video Cards</li>
<li class="list-group-item">Sound Cards</li>
</ul>
</div><!-- /. Column-left -->
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="content">
<div class="module-heading">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 pull-left">
<div class="module-title">
<h3>Featured Products</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">
<div class="controls hidden-xs text-right">
<a class="left fa fa-chevron-left btn btn-default" href="#carousel-example" data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-default" href="#carousel-example" data-slide="next"></a>
</div><!-- /. Controls -->
</div>
</div>
</div><!-- /. Module-Heading -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product Example</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Next Sample Product</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Grouped Product</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /. Content -->
</div><!-- /. Content Columns -->
</div>
</div><!-- /. Container -->

Related

How to append to html an owl-carousel with products w/ Javascript

i want to append my products to an owl-carousel from javascript but when i append it displays my owl-carousel like this:
While owl-carousel should be:
So my HTML code is:
<div class="container mt-5 mb-5" data-aos-anchor-placement="top-center">
<div class="owl-carousel">
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
</div>
</div>
My Javacsript code:
sectionCarouselProducts.innerHTML = sectionCarouselProducts.innerHTML + `
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="${product.img}" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
${product.title}
</h4>
</div>
</div>
</div>
`
Btw, i append my inner html to this html:
<div class="container mt-5 mb-5" data-aos-anchor-placement="top-center">
<div class="owl-carousel carousel-products">
</div>
</div>
So in conclusion why my owl carousel when i append it displays vertical and not carousel? Thank you for your help! For further information you can tell me to edit it!

var slider = tns({
container: '.my-slider',
items: 1,
responsive: {
640: {
edgePadding: 20,
gutter: 20,
items: 2
},
700: {
gutter: 30
},
900: {
items: 3
}
}
});
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container mt-5 mb-5" data-aos-anchor-placement="top-center">
<div class="my-slider">
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
Here is an example with your setup ... Hope it helps...

Javascript filter method for different data-filter

I just started learning javascript. I am facing a problem with filtering products while getting value from database.
my javascript code is below:
`var $grids = $(".grid").isotope({
itemSelector : '.grid-item',
layoutMode : 'fitRows'
});
$(".button-group").on("click", "button", function(){
var filterValue = $(this).attr('data-filter');
$grids.isotope({ filter: filterValue});
})
where as my php code is below:
<div id="filters" class="button-group text-end">
<button class="btn" data-filter="*">All Categories</button>
<button class="btn" data-filter=".clothes">Clothes</button>
<button class="btn" data-filter=".samsung">Phones</button>
<button class="btn" data-filter=".electronics">Electronics</button>
</div>
<div class="grid">
<?php
while($row = mysqli_fetch_array($result2)) {
?>
<div class="grid-item border border-warning " <?php echo " {$row['item_brand']}"; ?> >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src=" <?php echo " {$row['item_image']}"; ?>" alt="Calli">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<?php
}
?>
I am getting data-filter value from database column "item-brand" having the same value as mention in data-filter above. Only All categories is working perfectly. Kindly help me out in this.

Please make sure class e.g clothes, samsung are not escaped while php echo. means try
<div class="grid-item border border-warning <?php echo " {$row['item_brand']}"; ?>" >
instead of
<div class="grid-item border border-warning " <?php echo " {$row['item_brand']}"; ?> >
I have not exact php code or database so not sure but i have created demo html as below in which working fine will help you.
<div id="filters" class="button-group text-end">
<button class="btn" data-filter="*">All Categories</button>
<button class="btn" data-filter=".clothes">Clothes</button>
<button class="btn" data-filter=".samsung">Phones</button>
<button class="btn" data-filter=".electronics">Electronics</button>
</div>
<div class="grid">
<div class="grid-item border border-warning clothes" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<div class="grid-item border border-warning clothes" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<div class="grid-item border border-warning clothes" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<div class="grid-item border border-warning samsung" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js"></script>
<script type="text/javascript">
var $grids = $(".grid").isotope({
itemSelector : '.grid-item',
layoutMode : 'fitRows'
});
$(".button-group").on("click", "button", function(){
var filterValue = $(this).attr('data-filter');
$grids.isotope({ filter: filterValue});
})
</script>

Counter up function stop when scroll and show error

I'm receiving this error every time I scroll towards my counter up function -> "Uncaught TypeError: Cannot read property 'shift' of null at f (jquery.counterup.js:62)". Any idea how to fix it ?
Here's the code:
$('.counter').counterUp({
delay: 10,
time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/solid.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>

I have upgraded the version of counterUp and no problem: instead version 1.0.0, use the 2.1.0.
<script src="https://unpkg.com/jquery.counterup#2.1.0/jquery.counterup.js"></script>
$('.counter').counterUp({
delay: 10,
time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/solid.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://unpkg.com/jquery.counterup#2.1.0/jquery.counterup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>

Iterate using each function JS

I have 3 cards in my blade.php which looks like this:
<div class="container-fluid cfluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A3</span>
<small>time here </small>
</div>
</div>
</div>
</div>
</div>
What I need to get is the text inside the span. Here's my code for the each function:
$("#cfluid").each(function(){
var title = $(".roomT").text();
console.log(title);
});
Howevrer I got this as a result which I know is wrong:
A1A2A3
In which it should be like this:
A1
A2
A3

You can use classes (card-body and roomT) as part of the selector. Then simply use this object to refer the current element to get the text:
$("#cfluid .card-body .roomT").each(function(){
var title = $(this).text();
console.log(title);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid cfluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A3</span>
<small>time here </small>
</div>
</div>
</div>
</div>
</div>

if you are using #cfuild as parent .You should loop the .roomT.And if you need a array result better use Jquery.map instead of each
var res = $("#cfluid").find('.roomT').map(function(){
return $(this).text();
}).get();
console.log(res)
var res = $("#cfluid").find('.roomT').map(function() {
return $(this).text();
}).get();
console.log(res)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid cfluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A3</span>
<small>time here </small>
</div>
</div>
</div>
</div>
</div>

You can directly locate the .roomT element and loop as below
$('#cfluid .roomT').each((index, element) => {
console.log($(element).text())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="container-fluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
</div>

How to take the particular details in one division in jquery

Here I have two property details.
If I click first property contact button myFunction() it means I want to take property name 3BHK Individual House for SELL in Jayanagar and property id 1.
If I click second property contact button myFunction() it means I want to take property name 10BHK Individual House for SELL in Jayanagar and property id 2.
How can I do this?
var htmlString='';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=1"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name""="">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button></div></div></div></div></div>';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=5852408f05dd7b0320e3473d"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name""="">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button></div></div></div></div></div>';
$('#prop_listing').empty().append(htmlString);
function myFunction(that) {
name = $(that).closest('.prptylstt').find('.property_name').html();
console.log(name);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="prop_listing"></div>

move the code out of the HTML
use a class to access all buttons
use UNIQUE IDs or no IDs
a div does not have a value but has text() or html()
use type=button to not submit the form/page
$(function() {
$(".prlstbtn").on("click", function(e) {
var $list = $(this).closest(".prptylstt"),
name = $list.find(".property_name").text(),
id = $list.find(".p_id").attr("href").split("id=")[1];
console.log(id, name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=1"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">3BHK Individual House for SALE in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button type="button" class="btn btn-default prlstbtn">Contact</button>
</div>
</div>
</div>
</div>
</div>
<div class="row prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=2"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">10BHK Individual House for SALE in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 25.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button type="button" class="btn btn-default prlstbtn">Contact</button>
</div>
</div>
</div>
</div>
</div>

$(this) refer which button clicked.In onclick function without declaration this not performed.so apply with in the function like this myfuntion(this) .Then this declare in a variable that in DOM.
And then apply with jquery function of closest() and find() method
closest() to match the parent of the div and find() to match the inner element respected with clicked button.
function myFunction(that) {
var name = $(that).closest('.prptylstt').find('.property_name').html();
var id =/(id=)(\w+)/g.exec($(that).closest('.prptylstt').find('.p_id').attr('href'))
console.log(name);
console.log(id[2])
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row prptylstt" id="prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=1"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">3BHK Individual House for SELL in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button>
</div>
</div>
</div>
</div>
</div>
<div class="row prptylstt" id="prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=2"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">10BHK Individual House for SELL in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 25.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button>
</div>
</div>
</div>
</div>
</div>
or
Try with jquery script like this.It's easy to solve your problem.you can use $(this)
$(document).ready(function(){
$('.btn-default').click(function(){
var name = $(this).closest('.prptylstt').find('.property_name').html();
var id =/(id=)(\w+)/g.exec($(this).closest('.prptylstt').find('.p_id').attr('href'))
console.log(name);
console.log(id[2])
})
})
Updated answer for upadated Question
class name of the property_name is spell mistake "=" and both html content are 3BHK .i was corrected with that. see the below snippet.Its work out with query
var htmlString='';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=1"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class="property_name">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" >Contact</button></div></div></div></div></div>';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=5852408f05dd7b0320e3473d"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name">10BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" >Contact</button></div></div></div></div></div>';
$('#prop_listing').empty().append(htmlString);
$(document).on('click','.btn',function(){
name = $(this).closest('.prptylstt').find('h4').eq(0).html();
console.log(name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="prop_listing"></div>

Categories