We Keep Coding

Menu-link only works on index.html and no other page

For some reason my menu link doesn't work on any other page except for the index page. I think its a problem within JavaScript but I'm not quite sure. The HTML navigation section of the page not working is the exact same as the code for index.html. Here is the CSS
.list-menu {
position: fixed;
visibility: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999999;
background: rgba(0, 0, 0, 0.9);
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
opacity: 0;
z-index: -1;
}
.list-menu.reveal-modal {
opacity: 1;
z-index: 999999;
visibility: visible;
}
.list-menu .ion-close-round {
font-size: 31px;
position: absolute;
top: 32px;
right: 32px;
color: #fff;
cursor: pointer;
}
.circle {
width: 45px;
height: 45px;
text-align: center;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
border-radius: 50%;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
cursor: pointer;
z-index:99 ;
padding: 0px 0 0;
}
.circle i {
font-size: 36px;
color: #111112;
}
.circle.dark {
border-color: #292929;
}
.circle.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.large {
height: 120px;
width: 120px;
margin-top: -60px;
margin-left: -60px;
}
.circle.large:before {
margin-top: -18px;
margin-left: -10px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 31.0px;
border-color: transparent transparent transparent #ffffff;
}
.circle.large.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.inline {
position: relative;
top: 0;
left: 0;
margin-top: 0;
margin-left: 0;
display: inline-block;
z-index: 0;
}
#media all and (max-width: 1000px) {
.circle.large {
width: 90px;
height: 90px;
margin-top: -45px
;
}
.circle.large:before {
margin-top: -14px;
margin-left: -8px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 25.0px;
border-color: transparent transparent transparent #fff;
}
}
and the JavaScript.
$(document).ready(function(){
"use strict";
$('.menu-container').each(function(index) {
$(this).find('.circle').attr('menu-link', index);
$(this).find('.list-menu').clone().appendTo('body').attr('menu-link', index);
});
$('.menu-container .circle').click(function() {
var linkedVideo = $('section').closest('body').find('.list-menu[menu-link="' + $(this).attr('menu-link') + '"]');
linkedVideo.toggleClass('reveal-modal');
});
$('section').closest('body').find('.close-iframe').click(function() {
$(this).closest('.list-menu').toggleClass('reveal-modal');
});
Here is what the popup is supposed to look like. https://imgur.com/a/pyq9zis
I've been trying to fix for a while but can't seem to find a fix.
Here is also the html for both index.html and hotelam.html
First index
<!-- Navigation section ()
================================================== -->
<div class="nav-container">
<nav class="nav-inner transparent">
<div class="navbar">
<div class="container">
<div class="row">
<div class="brand">
<a href="home.html">
<img src="images/Logo4.png" ></a>
</a>
</div>
<div class="navicon">
<div class="menu-container">
<div class="circle dark inline">
<i class="icon ion-navicon"></i>
</div>
<div class="list-menu">
<i class="icon ion-close-round close-iframe"></i>
<div class="intro-inner">
<ul id="nav-menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
Second Hotelam.html
<!-- Navigation section
================================================== -->
<div class="nav-container">
<nav class="nav-inner transparent">
<div class="navbar">
<div class="color9">
<div class="container">
<div class="row">
<div class="brand2">
<a href="home.html">
<img src="images/brandl.png" ></a>
</a>
</div>
<div class="navicon">
<div class="menu-container">
<div class="circle dark inline">
<i class="icon ion-navicon"></i>
</div>
<div class="list-menu">
<i class="icon ion-close-round close-iframe"></i>
<div class="intro-inner">
<ul id="nav-menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>

Scroll event at specific location, the timing does not seem to match. and it is not optimized for all screen sizes

I have a question.
I am creating a website with the following code.
There is an error with the snippet. It's a link.
gruus.cafe24.com
There are still a lot of problems, and I'm testing what I want to do... There are parts that I can't solve for too long, so I ask for help.
If you scroll through the black area on the right, you will see the white subject text at the bottom. I wanted to give the effect of multiple sheets of paper overlapping and then being pulled out one by one and scrolled.
The white subject text at the bottom is fake.
There is the same text in the box that scrolls to the bottom, and when the box is displayed on the screen by scrolling through the screen, the fake text disappears at the same speed.
-> But the speed is not exactly right. And it's pretty good with a 1440 x 768 browser(mac book 13inch), but if you change the window size, it'll mess up.
The following part is also a problem, and I'm curious about how it works, but I'm still testing it.
As soon as the box touches the top of the screen, the goal is to make the fake title text appear in the same location (fixed) and pile up again on the top of the screen.
In summary, at first, it is pulled out one by one from the bottom and scrolled up, then piled up at the top of the screen, and when you scroll again, it is pulled out one by one and moved down and piled up...
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
var key = $('.cover-line').height();
var keyfour = eval(key*4);
var keytwo = eval(key*2);
var keyeight = eval(key*8);
var one = $('.box.firstbox').position().top + $('.box.one').height() - $('.cover-line').height();
var two = $('.box.one').position().top + $('.box.two').height() - $('.cover-line').height();
var three = $('.box.two').position().top + $('.box.three').height() - keyfour;
var four = $('.box.three').position().top + $('.box.four').height() - keyfour;
var five = $('.box.four').position().top + $('.box.five').height() - keyfour;
var six = $('.box.five').position().top + $('.box.six').height() - keyfour;
var seven = $('.box.six').position().top + $('.box.seven').height() - keyfour;
var eight = $('.box.seven').position().top + $('.box.eight').height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll <= one)
{
$(".cover-line.one").addClass("active");
$(".cover-line.two").removeClass("active");
}
else if (scroll <= two)
{
$(".cover-line.two").addClass("active");
$(".cover-line.three").removeClass("active");
}
else if (scroll <= three)
{
$(".cover-line.three").addClass("active");
$(".cover-line.four").removeClass("active");
}
else if (scroll <= four)
{
$(".cover-line.four").addClass("active");
$(".cover-line.five").removeClass("active");
}
else if (scroll <= five)
{
$(".cover-line.five").addClass("active");
$(".cover-line.six").removeClass("active");
}
else if (scroll <= six)
{
$(".cover-line.six").addClass("active");
$(".cover-line.seven").removeClass("active");
}
else if (scroll <= seven)
{
$(".cover-line.seven").addClass("active");
$(".cover-line.eight").removeClass("active");
}
else if (key = eight)
{
$(".cover-line.eight").addClass("active");
}
});
});
$(document).ready(function() {
$(window).scroll(function(){
if(window.scrollY==0){
$('.cover-line.one').removeClass('active');
} else {
}
});
});
</script>
* {
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0
}
*:focus {
outline: none;
}
*::selection {
background-color: transparent;
color: #9fa0a0;
}
html{
font-family: 'NeueHaasGroteskDisp Pro', 'Noto Sans KR', sans-serif;
font-weight: normal;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
body::-webkit-scrollbar {
display: none;
width: 0px;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background: transparent;
}
body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
}
body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
background-color: #fff;
overflow-x: hidden;
}
a {
text-decoration: none;
color: #000;
cursor: pointer;
transition: color .3s;
}
a.opacity {
transition: color .3s;
color: #9fa0a0;
}
main.main {
display: block;
position: relative;
width: 100%;
height: 100vh;
/* padding: 0.5vw; */
}
.leftbox {
display: inline-block;
position: fixed;
width: calc(50% - 1vw);
height: 100%;
min-height: 100vh;
float: left;
padding: 0.5vw;
font-size: 1.5vw;
line-height: 1.8vw;
font-weight: bold;
left: 0;
top: 0;
}
.rightbox {
display: inline-block;
position: absolute;
width: 50%;
height: auto;
min-height: 100vh;
float: left;
background: #000;
color: #fff;
/* padding: 0.5vw; */
left: 50%;
}
.box-header {
display: inline-block;
position: relative;
width: auto;
/*height: 2.2vw;*/
font-size: 1.5vw;
line-height: 2.4vw;
padding-left: 0.5vw;
font-weight: bold;
}
.cover-line {
display: block;
background: #000;
height: 2.2vw;
/*border-bottom: 2px solid #fff;*/
/* width: 100%; */
/* height: auto; */
}
.box-date {
display: inline-block;
position: relative;
width: auto;
/*height: 2.2vw;*/
font-size: 1.5vw;
line-height: 2.4vw;
float: right;
padding-right: 0.5vw;
font-weight: bold;
}
.box {
display: block;
position: relative;
/* width: 100%; */
height: calc(100vh - (2.2vw*8));
/* border-bottom: 2px solid #FFF; */
}
.box.firstbox {
position: relative;
}
.box-content {
display: block;
position: relative;
width: 100%;
height: auto;
}
.box-content video {
display: block;
position: relative;
width: auto;
max-width: 100%;
padding-top: 2.2vw;
height: calc(100vh - (2.2vw*10));
/* top: 50%; */
left: 50%;
transform: translateX(-50%);
}
.menubox {
display: block;
position: fixed;
bottom: 0.5vw;
width: auto;
height: auto;
}
.text {
display: block;
position: relative;
width: auto;
white-space: pre-line;
padding-left: 0.5vw;
font-size: 1.5vw;
line-height: 1.5vw;
top: 2.2vw;
z-index: 9;
}
.contact {
font-weight: bold;
cursor: pointer;
}
.firstbox .line {
display: block;
position: fixed;
top: 0;
width: 50%;
height: 2.2vw;
z-index: 9999999;
background: #000;
}
.intro {
display: block;
position: relative;
width: 100%;
height: auto;
white-space: pre-line;
}
.menu {
display: table;
position: relative;
width: auto;
height: auto;
cursor: pointer;
}
/*.menu.checked {
font-weight: bold;
}*/
.prev.on, #next.on {
display: inline-block;
}
.prev, #next {
display: none;
}
.contact:hover {
color: #9fa0a0;
}
.cover-header {
display: block;
position: fixed;
width: 100%;
height: auto;
bottom: 0;
z-index: 9999999;
/*border-top: 2px solid #fff;*/
}
.cover-line.active {
opacity: 0;
}
.cover-line.one.fix {
top: 2.2vw;
position: fixed;
opacity: 1;
}
<div class="leftbox">
<span class="intro">test
</span>
<span class="menubox">
<span class="menu selected checked">Selected</span>
<span class="menu 2022">2022</span>
<span class="menu 2021">2021</span>
<span class="menu 2020">2020</span>
</span></div>
<div class="rightbox">
<div class="box firstbox">
<div class="line">
<span class="box-header">test 1</span>
<span class="box-date">Feb 2022</span>
</div>
<span class="box-content">
<nav class="text">test text</nav>
<video width="100%" height="100%" muted="" autoplay="" playsinline="" loop="" preload="auto"><source src="http://jungdayoung.kr/sourcebox/dpgp.mp4"></video>
</span>
</div>
<div class="box one">
<div class="line">
<span class="box-header">test 2</span>
<span class="box-date">Jan 2022</span>
</div>
<span class="box-content"></span>
</div>
<div class="box two">
<div class="line">
<span class="box-header">test 3</span>
<span class="box-date">Jan 2022</span>
</div>
<span class="box-content"></span>
</div>
<div class="box three">
<div class="line">
<span class="box-header">test 4</span>
<span class="box-date">Oct 2021</span>
</div>
<span class="box-content"></span>
</div>
<div class="box four">
<div class="line">
<span class="box-header">test 5</span>
<span class="box-date">Sept 2021</span>
</div>
<span class="box-content"></span>
</div>
<div class="box five">
<div class="line">
<span class="box-header">test 6</span>
<span class="box-date">Mar 2021</span>
</div>
<span class="box-content"></span>
</div>
<div class="box six">
<div class="line">
<span class="box-header">test 7</span>
<span class="box-date">Jan 2021</span>
</div>
<span class="box-content"></span>
</div>
<div class="box seven">
<div class="line">
<span class="box-header">test 8</span>
<span class="box-date">Dec 2020</span>
</div>
<span class="box-content"></span>
</div>
<div class="box eight">
<div class="line">
<span class="box-header">test 9</span>
<span class="box-date">Dec 2020</span>
</div>
<span class="box-content"></span>
</div>
<!-- header -->
<div class="cover-header">
<span class="cover-line one"><span class="box-header">test 2</span><span class="box-date">Jan 2022</span></span>
<span class="cover-line two"><span class="box-header">test 3</span><span class="box-date">Jan 2022</span></span>
<span class="cover-line three"><span class="box-header">test 4</span><span class="box-date">Oct 2021</span></span>
<span class="cover-line four"><span class="box-header">test 5</span><span class="box-date">Sept 2021</span></span>
<span class="cover-line five"><span class="box-header">test 6</span><span class="box-date">Mar 2021</span></span>
<span class="cover-line six"><span class="box-header">test 7</span><span class="box-date">Jan 2021</span></span>
<span class="cover-line seven"><span class="box-header">test 8</span><span class="box-date">Dec 2020</span></span>
<span class="cover-line eight"><span class="box-header">test 9</span><span class="box-date"><Dec 2020/span></span>
</div>
</div>

Problem with adding JavaScript code to similar elements

I tried to add JavaScript function to similar element but unfortunately it doesn't work.
I also tried modifying JavaScript code by using querySelectorAll and Foreach but it didn't worked, It add the class but when it come to removing class it broke down and console just kept throwing undefined errors.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
arrow.classList.add("active_arr");
if (leftContainer.classList.contains("off")) {
leftContainer.classList.remove("off");
leftContainer.classList.add("active");
}
});
cancel.addEventListener("click", ({ target: cancel }) => {
cancel.classList.add("active_arr");
if (leftContainer.classList.contains("active")) {
leftContainer.classList.remove("active");
leftContainer.classList.add("off")
}
});
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #2c5346, #203a43, #0f2027);
}
.center{
display: flex;
justify-content: center;
align-items: center;
}
.main{
height: 100vh;
}
.box{
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(0,0,0,0.288);
border-radius: 23px;
flex-direction: column;
color: white;
position: relative;
overflow: hidden;
}
.box img{
width: 100px;
height: 100px;
border-radius: 50px;
}
.user_name{
margin-bottom: 5px;
font-size: 2rem;
}
.skill{
color: rgba(225,225,225,0.555);
}
/*arrow*/
.arr_container .cancel{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container i{
transform: rotate(45deg);
}
.active_arr{
transform: translate(80%, 80%);
}
.left_container{
position: absolute;
background: #0f2027;
width: 100%;
height: 100%;
border-radius: 23px;
padding: 40px 0 0 20px;
transition: all .4s;
}
.off{
transform: translate(-80%,-80%) rotate(90deg);
}
.active{
transform: translate(0) rotate(0);
}
.left_container p{
margin-bottom: 15px;
font-size: 1.2rem
}
.left_container .skill div{
display: inline-block;
color: rgb(155,155,155);
border:1px solid rgb(155,155,155);
padding: 5px 10px;
font-size: .9rem;
margin: 4px 4px 4px 0;
}
.left_container .icons{
font-size: 1.6rem;
margin-top: 10px;
}
.left_container .icons i{
color: #cfcfcf;
cursor: pointer;
margin-right: 10px;
transition: all .4s;
}
.left_container .icons i:hover{
color: #2c5346;
}
.cancel{
right: 0px;
bottom: 0px;
font-size: 1.5rem;
color: rgb(70,70,70);
position: absolute;
width: 50px;
height: 50px;
background: white;
justify-content: center;
align-items: center;
border-radius: 23px 0 23px 0;
}
.cancel .fas{
position: absolute;
right: 1rem;
bottom: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="cards.css">
<title>cards</title>
</head>
<body>
<div class="main center">
<div class="box center">
<img src="2bb723986d0546f2c26bcc27f712f0e0.jpg">
<div>
<p class="user_name">Mor Maz</p>
<p class="skill">Front-end Developer</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="skill">
<div>Html</div>
<div>Css</div>
<div>React</div>
<div>Node Js</div>
</div>
<div class="icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<div class="box center">
<img src="2bb723986d0546f2c26bcc27f712f0e0.jpg">
<div>
<p class="user_name">Mor Maz</p>
<p class="skill">Front-end Developer</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="skill">
<div>Html</div>
<div>Css</div>
<div>React</div>
<div>Node Js</div>
</div>
<div class="icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script src="cards.js"></script>
<!-- <script>
$(document).ready(function(){
$(".arr_container").click(function(){
$(".left_container").addClass("active")
})
})
</script>
<script>
$(".cancel").click(function(){
$(".left_container").removeClass("active")
})
</script> -->
</body>
</html>
I will appreciate any kind of help
thank you

The classnames and CSS are a mess and you're only adding active_arr to ar and you're only removing active_arr from cl. You're also only selecting one left_container
You should not reach up to change parents if possible; you should iterate parents, iterate their children, etc
This should get you started.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
});
cancel.addEventListener("click", ({ target: cancel }) => {
});
});

How to let users add movies to list similar to netflix?

I have a movie website I am working on similar to Netflix using HTML, CSS, JS and I am looking for a way to let users add a movie to their mylist, like Netflix, I have tried researching but could not find an answer. There is a working Registration and Login Form. Thanks in Advance guy!
// select the strip
$("section").each(function() {
// change the number of the "li" elements and the strip will be fine anyway
var wUl = $(this).find("ul").width();
var nLi = $(this).find("ul").children().length;
var wElement = 100 / nLi;
$("li").css("width", wElement + "%");
// hover "li"
$(this).find("li").hover(
// mouse In
function() {
$(this).toggleClass("hover");
var scaleFactor = 1.8;
var wBigElement = $(this).width() * scaleFactor;
var translation = (wBigElement - $(this).width()) / 2;
var item = $(this).parent().children();
$(this).css("transform", "scale(" + scaleFactor + ")");
if ($(this).is(":nth-child(1)")) {
item.slice(1,nLi).css("transform", "translate(" + translation * 2 + "px, 0px)");
}
for (var i = 2; i <= nLi - 1; i++) {
if ($(this).is(":nth-child(" + i + ")")) {
item.slice(0,i-1).css("transform", "translate(-" + translation + "px, 0px)")
.end().slice(i).css("transform", "translate(" + translation + "px, 0px)");
}
}
if ($(this).is(":nth-child(" + nLi + ")")) {
item.slice(0,(nLi-1)).css("transform", "translate(-" + translation * 2 + "px, 0px)");
}
// mouse Out
}, function() {
$(this).toggleClass("hover");
$(this).css("transform", "scale(1)");
$("li").not(this).css("transform", "translate(0px, 0px)");
}
);
});
#charset "UTF-8";
* {
box-sizing: border-box;
outline: 0px;
}
ul, ol {
list-style: none;
padding: 0px;
margin: 0px;
}
h2 {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
font-family: "Montserrat";
color: #fff;
background: #141414;
}
main {
display: block;
position: relative;
width: 100%;
height: 100vh;
padding: 4vw;
overflow-x: hidden;
}
.logo {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
padding: 3vw 4vw;
background: rgba(255, 255, 255, 0.02);
}
.logo svg {
display: block;
position: relative;
width: 10vw;
}
.logo svg path {
fill: #E50914;
}
border {
}
section {
display: block;
position: relative;
top: 8vw;
margin-bottom: 4vw;
}
section h2 {
display: block;
width: 100%;
font-size: 1.2vw;
font-weight: 600;
margin-bottom: .8vw;
margin-left: 4px;
}
section ul {
display: block;
position: relative;
width: 98%;
height: auto;
white-space: nowrap;
font-size: 0;
}
section ul:hover li:not(.hover) {
opacity: 0.3;
}
section ul li {
display: inline-block;
height: auto;
padding: 2px;
overflow: hidden;
cursor: pointer;
}
section ul li .img {
display: block;
position: relative;
width: 100%;
height: 0px;
padding-top: 56.25%;
background-size: cover;
transform-origin: top right;
}
section ul li .img:after {
content: "";
display: block;
position: absolute;
top: -10px;
left: -10px;
z-index: 1;
width: calc(100% + 20px);
height: calc(100% + 20px);
opacity: 0;
background: linear-gradient(to bottom, rgba(20, 20, 20, 0) 0%, #141414 100%);
transition: all 0.5s ease 0.2s;
}
section ul li .img img {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 0;
}
section ul li .card {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
z-index: 1;
width: 100%;
height: auto;
padding: 10px;
text-shadow: 0 1px 1px rgba(20, 20, 20, 0.6);
opacity: 0;
}
section ul li .card h3 {
display: block;
width: 100%;
font-size: .7vw;
font-weight: 600;
margin-bottom: .3vw;
}
section ul li .card .info {
display: block;
width: 100%;
margin-bottom: .3vw;
font-size: 0;
}
section ul li .card .info .match {
display: inline-block;
width: auto;
font-size: .5vw;
font-weight: 600;
margin-right: .4vw;
color: #46D369;
}
section ul li .card .info .age {
display: inline-block;
position: relative;
width: auto;
font-size: .5vw;
padding: 0 0.4em;
margin-right: .4vw;
border: solid 1px rgba(255, 255, 255, 0.4);
}
section ul li .card .info .dur {
display: inline-block;
width: auto;
font-size: .5vw;
}
section ul li .card .tags {
display: block;
width: 100%;
}
section ul li .card .tags span {
display: inline-block;
width: auto;
font-size: .5vw;
margin: 0 .3vw 0 0;
}
section ul li .card .tags span:after {
content: "●";
display: inline-block;
margin: 0 0 0 .3vw;
font-size: .8 xvw;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0);
color: rgba(255, 255, 255, 0.4);
}
section ul li .card .tags span:last-child:after {
display: none;
}
section ul li:hover .img:after {
opacity: 1;
}
section ul li:hover img {
opacity: 1;
}
section ul li:hover .card {
opacity: 1;
}
section ul li:first-child {
transform-origin: 0px center;
}
section ul li:last-child {
transform-origin: 100% center;
}
section ul li , li * {
transition: all .5s ease .2s;
}
.container:hover .arrow-right,
.container:hover .arrow-left {
opacity: 1;
transition: 0.2s;
}
.section-frame {
width: 100%;
margin-left: 30px;
margin-right: 30px;
/* border: 2px solid green; */
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- pics by fanart.tv-->
<main>
<div class="section-frame">
<section>
<h2>New Releases <i style="font-size:14px" class="fa"></i></h2>
<div class="right">
<ul>
<li class="item01">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/466272/moviethumb/once-upon-a-time-in-hollywood-5dfeb7beb0d22.jpg)"><img src="https://fanart.tv/fanart/movies/466272/moviebackground/untitled-manson-murders-project-5c58b437a6e65.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Once upon a time in... Hollywood <i style="font-size:.9vw; padding-left: 1% ;" class="fa"></i>
</h3>
<div class="info">
<div class="match">99% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 40min <i style="font-size:.9vw; padding-left: 120% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Comedy</span><span>Drama</span><span>Action</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item02">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/475557/moviethumb/joker-5db693c454a3e.jpg)"><img src="https://fanart.tv/fanart/movies/475557/moviebackground/joker-5d68337505352.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Joker <i style="font-size:.9vw; padding-left: 73% ;" class="fa"></i></h3>
<div class="info">
<div class="match">95% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 2min <i style="font-size:.9vw; padding-left: 130% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Crime</span><span>Drama</span><span>Thriller</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item03">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/496243/moviethumb/parasite-5d2d5ab30c73d.jpg)"><img src="https://fanart.tv/fanart/movies/496243/moviebackground/parasite-5df5fb5439d1d.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Parasite <i style="font-size:.9vw; padding-left: 69% ;" class="fa"></i></h3>
<div class="info">
<div class="match">98% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 12min <i style="font-size:.9vw; padding-left: 130% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Comedy</span><span>Crime</span><span>Drama</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item04">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/359724/moviethumb/ford-v-ferrari-5db74ab5a49b9.jpg)"><img src="https://fanart.tv/fanart/movies/359724/moviebackground/go-like-hell-5d0839e2ecc25.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Ford v. Ferrari <i style="font-size:.9vw; padding-left: 57% ;" class="fa"></i></h3>
<div class="info">
<div class="match">96% Match</div>
<div class="age">TV-PG</div>
<div class="dur">2h 32min <i style="font-size:.9vw; padding-left: 130% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Action</span><span>Biography</span><span>Drama</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item05">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/398978/moviethumb/the-irishman-5ded4b24803d2.jpg)"><img src="https://fanart.tv/fanart/movies/398978/moviebackground/the-irishman-5de15d18d48f4.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>The Irishman<i style="font-size:.9vw; padding-left: 59% ;" class="fa"></i></h3>
<div class="info">
<div class="match">92% Match</div>
<div class="age">TV-MA</div>
<div class="dur">3h 29min <i style="font-size:.9vw; padding-left: 128% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Biography</span><span>Crime</span><span>Drama</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item06">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/492188/moviethumb/marriage-story-5dd0c5d3db138.jpg)"><img src="https://fanart.tv/fanart/movies/492188/moviebackground/marriage-story-5def5bf3a229b.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Marriage Story<i style="font-size:.9vw; padding-left: 56% ;" class="fa"></i></h3>
<div class="info">
<div class="match">94% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 17min <i style="font-size:.9vw; padding-left: 148% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Comedy</span><span>Drama</span><span>Romance</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 28% ;"></i></div>
</div>
</li>
</ul>
</div>
</section>
</div>
</main>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
This are my codes HTML, CSS, and JS , I am basically looking for a way to make the my list function work, Meaning that a logged in user can have there own separate personal list.Once again thanks in Advance.

Align divs next to each other CSS (Cards Style)

I'm trying to align cards that are wrapped up in divs. What I want to do is align those cards beside each other until it reaches maximum screen width, then I want it to move to the next line automatically.
The problem is that once I copy the html code, the new copied card spawns on top of the previous card rather than next to each other.
HTML:
<div class="fighter-card">
<div class="front active">
<div class="ranking-position">1</div>
<div class="more">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<div class="fighter-picture">
<img src="~/images/Resources/RankingsPhotos/Lomachenko.png" />
</div>
<ul class="information">
<li>
<div class="information-left">Name:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Weight:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Belts:</div>
<div class="information-right">aa</div>
</li>
</ul>
</div>
<div class="back">
<div class="go-back">
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
</div>
<ul class="information">
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">None of your business</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">aa</div>
<div class="information-right">9<sup>o</sup></div>
</li>
</ul>
</div>
</div>
<div class="fighter-card">
//Next div with the same content for testing
</div>
CSS:
.fighter-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
min-height: 400px;
}
.fighter-card .front {
width: 100%;
height: 100%;
background: #171717;
padding: 30px;
box-sizing: border-box;
transition: .5s;
transform-origin: right;
float: left;
}
.ranking-position {
font-weight: bold;
width: 50%;
text-align: left;
float: left;
color: #fff;
font-size: 40px;
}
.more {
width: 50%;
text-align: right;
cursor: pointer;
float: right;
font-size: 24px;
color: #fff;
display: block;
}
.fighter-picture {
background-size: cover;
}
.information {
margin: 0;
padding: 0;
}
.information li {
padding: 10px 0;
border-bottom: 2px solid #fff;
display: flex;
font-weight: bold;
cursor: pointer;
color: #fff;
}
.information li:last-child {
border-bottom: none;
}
.information li .information-left {
width: 50%;
}
.information li .information-right {
width: 50%;
text-align: right;
}
.fighter-card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background: rgba(0,0,0,0.7);
box-sizing: border-box;
transform-origin: left;
transition: .5s;
transform: translateX(100%) rotateY(90deg);
}
.fighter-card .back.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front {
transform: translateX(-100%) rotateY(90deg);
}
.go-back {
font-size: 24px;
color: #fff;
text-align: right;
}
.go-back .fa {
cursor: pointer;
}
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.more').click(function () {
$('.back').addClass('active')
$('.front').removeClass('active')
});
$('.go-back').click(function () {
$('.back').removeClass('active')
$('.front').addClass('active')
});
});
I know it's a lot of code here entered. Just want to make sure that everything that could be related to this problem is included.
Thanks in advance.

If you use absolute positioning and specify the location, then you should do that for each card. If not, let the browser do the positioning by using display: inline-block or float: left (if there is other content on the line).