HTML form read only bug

Question

I'm new to HTML. I'm trying to create an inline form that consists of readonly plain text and input. However, some part of my output is missing. Expected {{i}} is ('I', 'body') where as output is ('I', Can anyone suggest what goes wrong? Thanks

My html file:

<p> Please select the relevant dependency that will add to your output </p>
    {% for i in extraction %}
    {{i}}
    <form class="form-inline">
        <div class="form-group mb-2">
          <label for="sampledependency" class="sr-only">Dependency</label>
          <input type="text" readonly class="form-control-plaintext" id="sampledependency" value={{i}}>
        </div>
        <div class="form-group mx-sm-3 mb-2">
          <label for="inputpolarity" class="sr-only">Polarity</label>
          <input type="text" class="form-control" id="inputpolarity" placeholder="Polarity">
        </div>
        <button type="submit" class="btn btn-primary mb-2">Add</button>
      </form>
    {% endfor %}

Here is rendered html_template from flask:

return render_template('annotation.html', 
                            first_sentence = first_sentence, 
                            extraction = [('I', 'body'),('d', 'adasd')])