How can I make this javascript apply on every div returned by jinja

I have a Jinja tag that returns some database data. I added some javascript that works on some divs inside the for tag. The javascript code applies only on the first div.

I am using fullPage.js in order to make full page scroll.

How can I solve this?

html:

    <div id="fullpage">
    <div class="vertical-scrolling">
      <h1 style="color: #fff;
    text-align: center;
    font-size: 10vw;">Would You Rather</h1>
        <h2 style="text-align:center">Scroll down...</h2>
    </div>


{% for wyr in wyr %}
    <div class="vertical-scrolling">

    <div>
        <h1 style="text-align:center; color:white;">{{ wyr.title }}</h1>
        <br>

        <h3 ><a href="/feed" style="text-decoration:none; color:black"><-Go back home</a></h3>

        <br><br><br><br><br>


        <div onclick = "f1()" id="o" style="padding-top:5%; padding-bottom:5%; text-align:center; background:red; color:white;height:10%">
            <h2 ><a>{{ wyr.option1 }}</a></h2>
        </div>
        <h2 style="text-align:center; background-color:white">or...</h2>
        <div onclick = "f2()" id="o2" style=" padding-top:5%; padding-bottom:5%;text-decoration:none;text-align:center; background:blue; color:white;">
            <label><h2 >{{ wyr.option2 }}</h2></label>
        </div>
    </div>
    </div>

    {% endfor %}

js:

new fullpage("#fullpage", {
      sectionsColor: ['#ffb224', '#0798ec'],
      sectionSelector: '.vertical-scrolling',
      navigation: true,
      parallax: true,
    });
    var o = document.getElementById("o")
    var o2 = document.getElementById("o2")
    function f1() {
            o.style["background-color"] = "#978480";
            o2.style["background-color"] = "blue";
        }
    function f2() {
            o2.style["background-color"] = "#978480";
            o.style["background-color"] = "red";

        }

Here is the css for fullPage.js:

    * {
  padding: 0;
  margin: 0px;
  font-family: 'Josefin Sans', sans-serif;
}

div#fp-nav a span {
    background: #fff !important;
}

I am a begginer and I find it easier to use inline css. Thanks for any help!

Answer

That js is hitting the id=’o2′ and being done with it, without unique id’s it won’t reach those next divs, you could fix this by making the id=”o2{{i}} where i is the increment of that wyr loop and add logic to the rest of your code.

Advertisement

Answer