Javascript animation only working for one item in list

I am practicing Javascript and HTML, I came across this list item/adpter like we call them in android. its great but I having challenges. I am adding them to my div programically like this

Javascript

HTML

div

$.ajax(

type: "GET",
url: "../public/allevents/"+pn,
success: function(data)
console.log('Events Response::'+data);
var obj = jQuery.parseJSON(data);

for(event in obj.events)
console.log('Event:'+event);
$("#eventHolder").append(
'<div class="make-3D-space">'
+'<div id="product-card">'
+'<div class="product-front">'
+'<div class="shadow"></div>'
+'<img src="'+'..'+obj.events[event].image+'" alt="" />'
+'<div class="image_overlay"></div>'
+'<div id="view_details">View details</div>'
+'<div class="stats">'
+'<div class="stats-container">'
+'<span class="product_price">FREE</span>'
+'<span class="product_name">'+obj.events[event].title+'</span>'
+'<p>'+moment(obj.events[event].starts).utc().format('DD MMM, YY [at] hh:mm A')+'</p>'
+'<div class="product-options">'
+'<strong>LOCATION</strong>'
+'<span>'+obj.events[event].address+'</span>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>');

addViewListenersToadapters();
,
error: function(xhr, status, error)
console.log('Events Response::'+xhr.responseText);
//swal("Error", "Error deleting, try again", "error");



)


They are adding just fine. But the expand animation is only working for the first item, from my knowledge it is because the items use a single id so Javascript finds the first item and applies the animation to it. I have the idea, I could change the ids of the items when adding them but this static javascriptthat does the animation has static ids so it wont work either way

items

id

Javascript

ids

static

javascript

static ids

function addViewListenersToadapters(){
$(document).ready(function()

// Lift card and show stats on Mouseover
$('#product-card').hover(function()
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
, function()
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
);

// Flip card to the back side
$('#view_details').click(function()
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('#product-card').addClass('flip-10');
setTimeout(function()
$('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function()
$('#product-front, #product-front div.shadow').hide();
);
, 50);

setTimeout(function()
$('#product-card').removeClass('flip90').addClass('flip190');
$('#product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function()
$('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function()
$('#product-card').css('transition', '100ms ease-out');
$('#cx, #cy').addClass('s1');
setTimeout(function()$('#cx, #cy').addClass('s2');, 100);
setTimeout(function()$('#cx, #cy').addClass('s3');, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
, 100);
, 100);
, 150);
);

// Flip card back to the front side
$('#flip-back').click(function()

$('#product-card').removeClass('flip180').addClass('flip190');
setTimeout(function()
$('#product-card').removeClass('flip190').addClass('flip90');

$('#product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function()
$('#product-back, #product-back div.shadow').hide();
$('#product-front, #product-front div.shadow').show();
);
, 50);

setTimeout(function()
$('#product-card').removeClass('flip90').addClass('flip-10');
$('#product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function()
$('#product-front div.shadow').hide();
$('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('#cx, #cy').removeClass('s1 s2 s3');
, 100);
, 150);

);


/* ---- Image Gallery Carousel ---- */

var carousel = $('#carousel ul');
var carouselSlideWidth = 335;
var carouselWidth = 0;
var isAnimating = false;

// building the width of the casousel
$('#carousel li').each(function()
carouselWidth += carouselSlideWidth;
);
$(carousel).css('width', carouselWidth);

// Load Next Image
$('div.carouselNext').on('click', function() isAnimating === true)return;
$('#carousel ul').css('left': "-" + newLeft + "px",
"transition": "300ms ease-out"
);
isAnimating = true;
setTimeout(function()isAnimating = false;, 300);
);

// Load Previous Image
$('div.carouselPrev').on('click', function()
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft - carouselSlideWidth;
if(newLeft < 0 );
);


How Can I fix this? Again am a learner I do not know my way around it.

1 Answer
1

You can add a class to the #product-cart div

$.ajax(

type: "GET",
url: "../public/allevents/"+pn,
success: function(data)
console.log('Events Response::'+data);
var obj = jQuery.parseJSON(data);

for(event in obj.events)
console.log('Event:'+event);
$("#eventHolder").append(
'<div class="make-3D-space">'
+'<div id="product-card" class="product-card">'
+'<div class="product-front">'
+'<div class="shadow"></div>'
+'<img src="'+'..'+obj.events[event].image+'" alt="" />'
+'<div class="image_overlay"></div>'
+'<div id="view_details">View details</div>'
+'<div class="stats">'
+'<div class="stats-container">'
+'<span class="product_price">FREE</span>'
+'<span class="product_name">'+obj.events[event].title+'</span>'
+'<p>'+moment(obj.events[event].starts).utc().format('DD MMM, YY [at] hh:mm A')+'</p>'
+'<div class="product-options">'
+'<strong>LOCATION</strong>'
+'<span>'+obj.events[event].address+'</span>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>');

addViewListenersToadapters();
,
error: function(xhr, status, error)
console.log('Events Response::'+xhr.responseText);
//swal("Error", "Error deleting, try again", "error");



)


and don't use the $(document).ready() inside function called async, it will never triggered.

function addViewListenersToadapters()


// Lift card and show stats on Mouseover
$('.product-card').hover(function()
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
, function()
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
);

// Flip card to the back side
$('#view_details').click(function()
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('#product-card').addClass('flip-10');
setTimeout(function()
$('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function()
$('#product-front, #product-front div.shadow').hide();
);
, 50);

setTimeout(function()
$('#product-card').removeClass('flip90').addClass('flip190');
$('#product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function()
$('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function()
$('#product-card').css('transition', '100ms ease-out');
$('#cx, #cy').addClass('s1');
setTimeout(function()$('#cx, #cy').addClass('s2');, 100);
setTimeout(function()$('#cx, #cy').addClass('s3');, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
, 100);
, 100);
, 150);
);

// Flip card back to the front side
$('#flip-back').click(function()

$('#product-card').removeClass('flip180').addClass('flip190');
setTimeout(function()
$('#product-card').removeClass('flip190').addClass('flip90');

$('#product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function()
$('#product-back, #product-back div.shadow').hide();
$('#product-front, #product-front div.shadow').show();
);
, 50);

setTimeout(function()
$('#product-card').removeClass('flip90').addClass('flip-10');
$('#product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function()
$('#product-front div.shadow').hide();
$('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('#cx, #cy').removeClass('s1 s2 s3');
, 100);
, 150);

);


/* ---- Image Gallery Carousel ---- */

var carousel = $('#carousel ul');
var carouselSlideWidth = 335;
var carouselWidth = 0;
var isAnimating = false;

// building the width of the casousel
$('#carousel li').each(function()
carouselWidth += carouselSlideWidth;
);
$(carousel).css('width', carouselWidth);

// Load Next Image
$('div.carouselNext').on('click', function()
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft + carouselSlideWidth;
if(newLeft == carouselWidth );

// Load Previous Image
$('div.carouselPrev').on('click', function()
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft - carouselSlideWidth;
if(newLeft < 0 );



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.