Why doesn't my page show me my '.wall' anymore after i clicked on the right "arrow"(.wall is extra info) [netflix sliders]

Question

I don't understand why my page doesn't show me my .wall anymore after I clicked on the right "arrow"?

I'm making this for school, the site should work as a netflix slider carousel and I should need to use modular code for 3 sliders.

I'm stuck at the first, after clicking the right button once I move to the next slide, here I only put 1 .wall to see if it would work and it doesn't.

If I click back (left again) so that I will be at the beginning page, the .wall doesn't appear anymore, but the cross to close does...

What's wrong? How should I fix this? ps: jquery code is in the html

HTML & jQuery

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <section>

        <div class="links">links</div>
        <div class="rechts">rechts</div>

        <div id="head">
            <h2>Movies</h2>

            <span class="close"><i class="fa fa-times"></i></span>
        </div>

        <div class="container">

            <div class="item first" data-toggle="#div1">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 1.</p>
                    </div>
                </div>
                <div class="wall" id="div1">
                    <h2>Dit is een poes 1.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting.</p>
                </div>
            </div>

            <div class="item first" data-toggle="#div2">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 2.</p>
                    </div>
                </div>
                <div class="wall" id="div2">
                    <h2>Dit is een poes 2.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting.</p>
                </div>
            </div>

            <div class="item first" data-toggle="#div3">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 3.</p>
                    </div>
                </div>
                <div class="wall" id="div3">
                    <h2>Dit is een poes 3.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting.</p>
                </div>
            </div>

            <div class="item first" data-toggle="#div4">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 4.</p>
                    </div>
                </div>
                <div class="wall" id="div4">
                    <h2>Dit is een poes 4.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting.</p>
                </div>
            </div>

            <div class="item first" data-toggle="#div5">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 5.</p>
                    </div>
                </div>
                <div class="wall" id="div5">
                    <h2>Dit is een poes 5.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting.</p>
                </div>
            </div>




            <div class="item second" data-toggle="#div6">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 1.</p>
                    </div>
                </div>
                <div class="wall" id="div6">
                    <h2>Dit is een Tijger 1.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting.</p>
                </div>
            </div>
            <div class="item second">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 2.</p>
                    </div>
                </div>
            </div>
            <div class="item second">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 3.</p>
                    </div>
                </div>
            </div>
            <div class="item second">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 4.</p>
                    </div>
                </div>
            </div>
            <div class="item second">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 5.</p>
                    </div>
                </div>
            </div>





            <div class="item third">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 1.</p>
                    </div>
                </div>
            </div>
            <div class="item third">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 2.</p>
                    </div>
                </div>
            </div>
            <div class="item third">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 3.</p>
                    </div>
                </div>
            </div>
            <div class="item third">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 4.</p>
                    </div>
                </div>
            </div>
            <div class="item third">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 5.</p>
                    </div>
                </div>
            </div>





            <div class="item fourth">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 1.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 2.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 3.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 4.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 5.</p>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <script src="script.js"></script>
    <script>
        $('.close').hide();
        $(".item[data-toggle]").on("click", function(e) {
            e.preventDefault();
            var selector = $(this).data("toggle");  // get corresponding element
            $(".wall").hide();
            $(selector).show();
            $('.close').show();
        });


        $('.close').click(function(){
            $(".wall").hide();
            $('.close').hide();
        });

        var count = 0;
        $('.links').hide();
        $('.rechts').click(function(){
            $('.links').show();
            count+= 1;
            if(count >= 3){
                $('.rechts').hide();
            }
        });
        $('.links').click(function(){
            count-=1;
            if(count<3){
                $('.rechts').show();
            }
            if(count == 0){
                $('.links').hide();
            }
        });

    </script>
    </body>

</html>

CSS

    @charset "utf-8";
    /* CSS Document */
    body{
        background-color: black;
        color:white;
    }
    section{
        max-width: 1400px;
        overflow: hidden;
        margin: auto;
    }
    .container{
        width: 400%;
        margin: auto;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        left: 0px;
        z-index: 10;
        /*transform: translate(-75%);
        Dit zijn je speelvelden (0% = pagina 1; 25% = pagina 2; etc. */
    }
    .item{
        flex-grow: 1;
        height: 100px;
        width: 200px;
        transition: all 300ms ease-in-out;
        position: relative;
    }
    .first{
        background: url('https://cdn.pixabay.com/photo/2019/12/15/18/24/winter-4697776_1280.jpg') no-repeat center center transparent;
        background-size: cover;
    }
    .second{
        background: url('https://cdn.pixabay.com/photo/2019/02/22/12/30/forest-4013452_1280.jpg') no-repeat center center transparent;
        background-size: cover;
    }
    .third{
        background: url('https://cdn.pixabay.com/photo/2019/11/22/06/40/wolchulsan-4644223_1280.jpg') no-repeat center center transparent;
        background-size: cover;
    }
    .fourth{
        background: url('https://cdn.pixabay.com/photo/2019/08/02/14/20/eagle-4379798_1280.jpg') no-repeat center center transparent;
        background-size: cover;
    }
    .item:hover{
        flex-grow: 2;
        height: 150px;
    }
    .caption{
        opacity: 0;
        position: absolute;
        top: 65%;
        left: 15px;
        right: 0;
        bottom: 0;
        transition: all 300ms ease-in-out;
    }
    .item:hover .caption{
        opacity: 1;
        color:  aliceblue;
        font-size: 150%;
    }

    .links{
        text-align: center;
        width:50px;
        height: 100px;
        border: 1px solid red;
        position: absolute;
        left: 10px;
        top: 145px;
        z-index: 100;
    }
    .rechts{
        text-align: center;
        width:50px;
        height: 100px;
        border: 1px solid red;
        position: absolute;
        right: 10px;
        top: 145px;
        z-index: 100;
    }
    .wall{
        width: 1000px;
        height: 300px;
        margin: auto;
        padding: 15px;
        color: white;
        background: rgba(205,157,158,0.50);
        position: fixed;
        top: 300px;
        left: 150px;
        display: none;
        overflow: hidden;
    }
    .wall p{
        width:30%;
        position: relative;
    }
    .close{
        position: fixed;
        top:300px;
        right: 75px;
    }

JS

    /* eslint-env es6 */
    /* eslint-disable no-console */
    console.log("START");
    const container = document.querySelector('.container');
    const bLinks = document.querySelector('.links');
    const bRechts = document.querySelector('.rechts');

    var index = 0;

    console.log(bLinks);
    console.log(bRechts);

    bLinks.addEventListener('click',klikLinks);
    bRechts.addEventListener('click',klikRechts);


    function klikLinks(){
        console.log('links geklikt');
        index = (index > 0) ? index -1 : 0;
        container.style.transform = 'translateX(' + (index) * -25 + '%)';
    }

    function klikRechts(){
    console.log('rechts geklikt');
        index = (index < 4 - 1) ? index+1 : 3;    
        container.style.transform = 'translateX(' + (index) * -25 + '%)';
    }

Answer 1

The issue is that the transform:translateX() property on the container div gets applied on its child .wall elements.

here's the link to the question with a hack.

however, I would recommend placing the .wall divs outside the container div somewhere like this in another container.

<div class="container">
    <div class="item first" data-childId="2"> /* content */ </div>
    <div class="item first" data-childId="2"> /* content */ </div>
    ...
</div>
<div class="wall-container">
    <div class="wall" data-itemId="1"> /* content */ </div>
    <div class="wall" data-itemId="2"> /* content */ </div>
    ...
</div>

Now to select the .wall element add a data attribute (ex. data-itemId) to each div and its child id in the data attribute for the .item div (ex. data-childId)

So on the click event of .item

$(".item").on("click", function(e) {
    $(".wall").hide();
    var childId = $(e.currentTarget).data("childid");
    $("div[data-itemId='" + childId + "']").show();
    $('.close').show();
});

Here e.currentTarget gets the clicked .item element and then fetch the data attribute for it, without the need for adding static HTML id for every element.