How can I pass this list index 0 in item in “Place” function

Question

How can I pass this list item in the javascript function??

    {% for a in ard %}
            <h3 style="font-style:italic; font-family:verdana;">{{a[0]}}</h3><br>
            <li>{{a[1]}}</li>
            <li>{{a[2]}}</li>
            <li>{{a[3]}}</li>
            <button onclick="Place({{a[0]}});">Place order</button>
            <hr>
    {% endfor %}

Answer 1

Wrap them in a node and use querySelectorAll ?

    {% for a in ard %}
            <h3 style="font-style:italic; font-family:verdana;">{{a[0]}}</h3><br>
            <ul class="item-list">
                <li>{{a[1]}}</li>
                <li>{{a[2]}}</li>
                <li>{{a[3]}}</li>
            </ul>
            <button onclick="Place({{a[0]}});">Place order</button>
            <hr>
    {% endfor %}

document.querySelectorAll('.item-list > li')

Answer 2

Assuming ard is a tuple of strings, as provided on the from comments ("Uno R3", "with USB", "microroll") . In order to create a list out of the data structure, you should create each list item tag <li> using the for in loop.

Your code on jinja2 would be similar to the following:

{# Title using the first element of the tuple #}
<h3 style="font-style:italic; font-family: verdana;">
  {{ ard[0] }} 
</h3>

<br />

<ul id="arduino-items">
{% for item in ard %}
  <li>{{ item }}</li>
{% endfor %}
</ul>

<button onclick="Place( {{ a[0] }} );">Place order</button>
<hr>

and the resulting HTML rendered will be like the following:

<h3>Uno R3</h3>
<ul id="arduino-items">
  <li>Uno R3</li>
  <li>with USB</li>
  <li>microroll</li>
</ul>

<button onclick="Place("Uno R3");">Place order</button>
<hr />