如何根据从数据库中获取的项目数在每次单击按钮后动态显示div？

Question

I have some data in my database. I will fetch the data and will use the count. Now I have to display this data one by one in a div. So there will be first data and a next button. When I click on 'next' button,the second data fetched shows and so on until the end. At the end the next button disappears and another button appears.

PLS Note: I am using python flask as back end

How to do this???

     <button type="button" class="btn btn-primary m-b-10 m-l-5" onclick="nextpart()" style="display:inline">Next ></button>
<div class="form-left-w3l" id="welcomeDiv1">
            <h6>Data : {{ id }}</h6>
        </div>
<div id="welcomeDiv2">
</div>

JS:

function nextpart() {
               document.getElementById('welcomeDiv1').style.display = "none";
               document.getElementById('welcomeDiv2').style.display = "block";
               }

Answer 1

Save the data in an array. Create all the div s with a for-loop. Make them all style="display:none" .

Then .show() the first one and add a class like active to it.

Hook the Next-Button to a function: .hide() the active div and remove the active class form it. .show() the next sibling of that div and add the active class.

Use the same logic for the Prev-Button.