We Keep Coding

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...

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>

I would like to change the icon only on collapsed: Getting-> attr is not defined:

I am trying to make only the collapsed aria to show different arrow.
most of code which i tried until now work only on one collapsed element but leave incase of clicking on second tile the first arrow wrong-direction, and turn the second.
i tried to use two css classes with a transition to rotate but had problems with fastclickers. if you click very fast the arrow wasnt able to turn twice
$(document).ready(function () {
$(".btn-link")
.on(attr("aria-expanded", "true"), (function () {
$(this).parent().find('fa-angle-down').removeClass('fa-angle-down').addClass('fa-angle-up');
})
.on(attr("aria-expanded", "false"), (function () {
$(this).parent().find('fa-angle-up').removeClass('fa-angle-up').addClass('fa-angle-down');
}))); });
<!-- Accordion Liste-->
<div class="accordion" id="accordionListe">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode1"></div>
<script type="text/javascript">
var qrcode1 = new QRCode(document.getElementById("qrcode1"), {
text: "www.sfdbvsd",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>Ein Gutschein für eine Premium Wäsche!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>

I'd suggest a different approach: .toggleClass( className ) on the child element:
$(".btn-link").on('click', function (e) {
$(this).find('i').toggleClass('fa-angle-down fa-angle-up')
});
Please, avoid duplicated IDs like kundenKarteBack or gutscheinDaten. An ID must be unique.
According to your comment there are two solutions:
set the first i tag with fa-angle-up class instead of fa-angle-down
...or change the event handler condition
like:
$(".btn-link").on('click', function (e) {
if ($(this).is('.collapsed')) {
$(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
} else {
$(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
}
});
$(".btn-link").on('click', function (e) {
if ($(this).is('.collapsed')) {
$(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
} else {
$(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Accordion Liste-->
<div class="accordion" id="accordionListe">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode1"></div>
</div>
<hr>
<p>Ein Gutschein für eine Premium Wäsche!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein2"
aria-expanded="false" aria-controls="Gutschein2"><span class="pull-left">Kaffee</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein2" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode2"></div>
</div>
<hr>
<p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein3"
aria-expanded="false" aria-controls="Gutschein3"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein3" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode3"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein4"
aria-expanded="false" aria-controls="Gutschein4"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein4" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode4"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein5"
aria-expanded="false" aria-controls="Gutschein5">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein5" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode5"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein6"
aria-expanded="false" aria-controls="Gutschein6">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein6" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode6"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
</div>
<!-- /Accordion Liste-->
In any case you may use the accordion events and in this case your handler will be:
$(".collapse").on('show.bs.collapse hide.bs.collapse', function (e) {
if (e.type == 'show') {
$(this).prev().find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
} else {
$(this).prev().find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
}
});
$(".collapse").on('show.bs.collapse hide.bs.collapse', function (e) {
if (e.type == 'show') {
$(this).prev().find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
} else {
$(this).prev().find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Accordion Liste-->
<div class="accordion" id="accordionListe">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode1"></div>
</div>
<hr>
<p>Ein Gutschein für eine Premium Wäsche!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein2"
aria-expanded="false" aria-controls="Gutschein2"><span class="pull-left">Kaffee</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein2" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode2"></div>
</div>
<hr>
<p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein3"
aria-expanded="false" aria-controls="Gutschein3"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein3" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode3"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein4"
aria-expanded="false" aria-controls="Gutschein4"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein4" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode4"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein5"
aria-expanded="false" aria-controls="Gutschein5">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein5" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode5"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein6"
aria-expanded="false" aria-controls="Gutschein6">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein6" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode6"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
</div>
<!-- /Accordion Liste-->

It was my first question on stackoverflow and i think i got a wrong approach. sorry 4 that.
here is more code that will maybe help understanding my problem.
<!-- Accordion Liste-->
<div class="accordion" id="accordionListe">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode1"></div>
<script type="text/javascript">
var qrcode1 = new QRCode(document.getElementById("qrcode1"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>Ein Gutschein für eine Premium Wäsche!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein2"
aria-expanded="false" aria-controls="Gutschein2"><span class="pull-left">Kaffee</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein2" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode2"></div>
<script type="text/javascript">
var qrcode2 = new QRCode(document.getElementById("qrcode2"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein3"
aria-expanded="false" aria-controls="Gutschein3"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein3" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode3"></div>
<script type="text/javascript">
var qrcode3 = new QRCode(document.getElementById("qrcode3"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein4"
aria-expanded="false" aria-controls="Gutschein4"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein4" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode4"></div>
<script type="text/javascript">
var qrcode4 = new QRCode(document.getElementById("qrcode4"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein5"
aria-expanded="false" aria-controls="Gutschein5">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein5" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode5"></div>
<script type="text/javascript">
var qrcode5 = new QRCode(document.getElementById("qrcode5"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein6"
aria-expanded="false" aria-controls="Gutschein6">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein6" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode6"></div>
<script type="text/javascript">
var qrcode6 = new QRCode(document.getElementById("qrcode6"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein11"
aria-expanded="false" aria-controls="Gutschein11">
<span class="pull-left">Kaffee</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein11" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode7"></div>
<script type="text/javascript">
var qrcode7 = new QRCode(document.getElementById("qrcode7"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein7"
aria-expanded="false" aria-controls="Gutschein7">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein7" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode8"></div>
<script type="text/javascript">
var qrcode8 = new QRCode(document.getElementById("qrcode8"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein8"
aria-expanded="false" aria-controls="Gutschein8">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein8" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode9"></div>
<script type="text/javascript">
var qrcode9 = new QRCode(document.getElementById("qrcode9"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button id="scroller" class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#Gutschein9" aria-expanded="false" aria-controls="Gutschein9">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein9" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode10"></div>
<script type="text/javascript">
var qrcode10 = new QRCode(document.getElementById("qrcode10"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein10"
aria-expanded="false" aria-controls="Gutschein10">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein10" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode11"></div>
<script type="text/javascript">
var qrcode11 = new QRCode(document.getElementById("qrcode11"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
</div>
<!-- /Accordion Liste-->

How can I change attribute value of Html tag?

I have this HTML code.
document.getElementById("HostsBar").setAttribute("data-to", "120");
<div class="container-fluid">
<div class="block-header">
<h2>SECURITY DASHBOARD</h2>
</div>
<div id="burayaset">
<!-- Widgets -->
<div class="row clearfix">
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-blue">remove_from_queue</i>
</div>
<div class="content">
<div class="text">HOSTS</div>
<div id="HostsBar" class="number count-to" data-from="0" data-to="125" data-speed="15" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-blue-grey">storage</i>
</div>
<div class="content">
<div class="text">PRODUCTS</div>
<div class="number count-to" data-from="0" data-to="257" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-cyan">warning</i>
</div>
<div class="content">
<div class="text">VULNERABILITIES</div>
<div class="number count-to" data-from="0" data-to="1225" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
</div>
I want to change count-to value with data that come from backend. How can I do that in Javascript. I tried But it not worked.

its updating :
alert(document.getElementById("HostsBar").getAttribute('data-to'));
document.getElementById("HostsBar").setAttribute("data-to", "120");
alert(document.getElementById("HostsBar").getAttribute('data-to'));
<div class="container-fluid">
<div class="block-header">
<h2>SECURITY DASHBOARD</h2>
</div>
<div id="burayaset">
<!-- Widgets -->
<div class="row clearfix">
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-blue">remove_from_queue</i>
</div>
<div class="content">
<div class="text">HOSTS</div>
<div id="HostsBar" class="number count-to" data-from="0" data-to="125" data-speed="15" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-blue-grey">storage</i>
</div>
<div class="content">
<div class="text">PRODUCTS</div>
<div class="number count-to" data-from="0" data-to="257" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-cyan">warning</i>
</div>
<div class="content">
<div class="text">VULNERABILITIES</div>
<div class="number count-to" data-from="0" data-to="1225" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
</div>

I solved the issue. Its a library and it can only change by its function.
$("#HostsBar").countTo({from:0, to:response});

Bootstrap Product Carousel Overflow?

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 -->