[FIXED] How to set database values to elements in a for loop?

Issue

I have a loop on my html page that displays a checkbox button for each row in a table that has a specific foreign key.

I want each button to represent a different row and hold values from the respective columns, so that when the user clicks on them, these values can be used in a route. But I have no idea how to go about it.

This is the route that renders the page by querying all the rows of the table:

@raffle.route('/numbers<raffle_id>', methods=['GET', 'POST'])
@login_required
def numbers(raffle_id):
    response = readnumber(rifa_id)
    result = response['data']
    return render_template('numbers.html', number=result, raffle_id=raffle_id)

This is the HTML:

<div class="container">
    <div id="div_buy" class="box">
        <a href="{{ url_for('raffle.buy', raffle_id=raffle_id) }}" id="btn_buy" class="btn btn-success send ">BUY</a>
    </div>
    {% for i in number %}
         <span class="button-checkbox">
             <button type="button" class="btn" data-color="primary">{{ 1 }}</button>
             <input type="checkbox" class="hidden" />
         </span>
    {% endfor %}
</div>

Solution

First up, it looks like you're using 1 inside the button, which I'm assuming is a typo for i.

Add a link to each button:

<div class="container">
    <div id="div_buy" class="box">
        <a href="{{ url_for('raffle.buy', raffle_id=raffle_id) }}" id="btn_buy" class="btn btn-success send ">BUY</a>
    </div>
    {% for i in number %}
         <span class="button-checkbox">
             <button onclick="{{ url_for('raffle.my_route', data=i) }}" type="button" class="btn" data-color="primary">{{ i }}</button>
             <input type="checkbox" class="hidden" />
         </span>
    {% endfor %}
</div>

Alternatively put each button in its own form:

<div class="container">
    <div id="div_buy" class="box">
        <a href="{{ url_for('raffle.buy', raffle_id=raffle_id) }}" id="btn_buy" class="btn btn-success send ">BUY</a>
    </div>
    {% for i in number %}
        <form action="{{ url_for('raffle.my_route', data=i) }}">
            <span class="button-checkbox">
                <button type="submit" name="my-button" class="btn" data-color="primary">{{ i }}</button>
                <input type="checkbox" class="hidden" />
            </span>
        </form>
    {% endfor %}
</div>

And then catch the data variable in a route:

@raffle.route('/path/with<data>', methods=['GET', 'POST'])
@login_required
def my_route(data):
    
    # do stuff with data variable
    return render_template('another_template.html')

Answered By - half of a glazier