Как добавить Product4 и Product5 в скрипт?

[sochi-russia]

Здравствуйте
Есть скрипт

$(document).ready(function(){
    counter = 2; // for product 2
    
    $(".next").click(function(){
        if(counter == 1)
        {
            $(".product1").fadeOut(500);
            $(".product2").fadeIn(500);
            $(".h1").animate({top:"-30%"});
            $(".h2").animate({top:"50%"});
            counter = 2;
        }
        else if(counter == 2)
        {
            $(".product2").fadeOut(500);
            $(".product3").fadeIn(500);
            $(".h2").animate({top:"-30%"});
            $(".h3").animate({top:"50%"});
            counter = 3;
        }
    });
    
    $(".pre").click(function(){
        if(counter == 2)
        {
            $(".product2").fadeOut(500);
            $(".product1").fadeIn(500);
            $(".h1").animate({top:"50%"});
            $(".h2").animate({top:"130%"});
            counter = 1;
        }
        else if(counter == 3)
        {
            $(".product3").fadeOut(500);
            $(".product2").fadeIn(500);
            $(".h2").animate({top:"50%"});
            $(".h3").animate({top:"130%"});
            counter = 2;
        }
    });      
});

Как правильно добавить product4 и product5 в скрипт?
Заранее спасибо большое, с уважением.

[voraa]

Как то так

$(document).ready(function(){
	const numproducts = 5
    let counter = 2; // for product 2
     
    $(".next").click(function(){
        if(counter < numproducts)
        {
            $(`.product${counter}`).fadeOut(500);
            $(`.product${counter+1}`).fadeIn(500);
            $(`.h${counter}`).animate({top:"-30%"});
            $(`.h${counter+1}`).animate({top:"50%"});
            counter ++;
        }
    });
     
    $(".pre").click(function(){
        if(counter > 1)
        {
            $(`.product${counter}`).fadeOut(500);
            $(`.product${counter-1}`).fadeIn(500);
            $(`.h${counter-1}`).animate({top:"50%"});
            $(`.h${counter}`).animate({top:"130%"});
            counter--;
        }
    });     
})

Но вообще это извращение каждому элементу давать класс с номером

[sochi-russia]

$(document).ready(function(){
	const numproducts = 5
    let counter = 2; // for product 2
     
    $(".next").click(function(){
        if(counter < numproducts)
        {
            $(`.product${counter}`).fadeOut(500);
            $(`.product${counter+1}`).fadeIn(500);
            $(`.h${counter}`).animate({top:"-30%"});
            $(`.h${counter+1}`).animate({top:"50%"});
            counter ++;
        }
    });
     
    $(".pre").click(function(){
        if(counter > 1)
        {
            $(`.product${counter}`).fadeOut(500);
            $(`.product${counter-1}`).fadeIn(500);
            $(`.h${counter-1}`).animate({top:"50%"});
            $(`.h${counter}`).animate({top:"130%"});
            counter--;
        }
    });     
})

Спасибо огромнейшее!!!