title: How to get dynamic fields with Flask?
body: <p>I'am trying to build a web app that can dynamically get more fields</p>
  
  <p>The app is for getting a hamburger shop orders so there would be orders of lets say 1 hamburger or 7 hamburgers, I tried some code I found out but i having troubles to process the data of the orders and save them into a date base</p>
  
  <pre><code>{% extends "layout.html" %}
  
  {% block title %}
      Comander {% endblock %}
  
  {% block main %} &lt;form class="/comander" method="post"&gt;
  
  &lt;head&gt;   &lt;meta charset="utf-6"&gt;   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;/head&gt;
  
  &lt;!--Hasta arriva del panel--&gt; &lt;div class="container"&gt;   &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;Burgers&lt;/div&gt;
      &lt;div class="panel-body"&gt;
  
          &lt;div class="input-group control-group after-add-more"&gt;
  
  
  &lt;div class="col-sm-1 nopadding"&gt;   &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
        &lt;select class="mdb-select md-form colorful-select dropdown-primary" id="formule" name="formule"&gt;
          &lt;option value="" disabled selected&gt;Formule&lt;/option&gt;
          &lt;option value="1"&gt;Classique&lt;/option&gt;
          &lt;option value="2"&gt;Big&lt;/option&gt;
          &lt;option value="3"&gt;Veggie&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  &lt;div class="col-sm-2 nopadding"&gt;   &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
        &lt;select class="mdb-select md-form colorful-select dropdown-primary" id="fromage" name="fromage"&gt;
          &lt;option value="" disabled selected&gt;Fromage&lt;/option&gt;
          &lt;option value="1"&gt;Chedar&lt;/option&gt;
          &lt;option value="2"&gt;Tomme&lt;/option&gt;
          &lt;option value="3"&gt;Blue&lt;/option&gt;
          &lt;option value="4"&gt;Chevre&lt;/option&gt;
          &lt;option value="5"&gt;Cantal&lt;/option&gt;
          &lt;option value="6"&gt;Reblochon&lt;/option&gt;
          &lt;option value="7"&gt;Maroille&lt;/option&gt;
          &lt;option value="8"&gt;Sans Fromage&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  &lt;div class="col-sm-1 nopadding"&gt;   &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
        &lt;select class="mdb-select md-form colorful-select dropdown-primary" id="cuisson" name="cuisson"&gt;
          &lt;option value="" disabled selected&gt;Cuisson&lt;/option&gt;
          &lt;option value="1"&gt;Blue&lt;/option&gt;
          &lt;option value="2"&gt;Seignan&lt;/option&gt;
          &lt;option value="3"&gt;A poit&lt;/option&gt;
          &lt;option value="4"&gt;Bien Cuit&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  
  &lt;div class="col-sm-2 nopadding"&gt;   &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
  
  &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="e_c" value="1" id="e_c"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;Extra Chedar&lt;/label&gt; &lt;/div&gt; &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="e_b" value="1" id="e_b"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;Extra Bacon&lt;/label&gt; &lt;/div&gt; &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="e_a" value="1" id="e_a"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;Extra Autre&lt;/label&gt; &lt;/div&gt;
  
      &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  
  &lt;div class="col-sm-2 nopadding"&gt;   &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
  
  &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="s_o" value="1" id="s_o"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;S/Oni&lt;/label&gt; &lt;/div&gt; &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="s_sal" value="1" id="s_sal"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;S/Sal&lt;/label&gt; &lt;/div&gt; &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="s_c" value="1" id="s_c"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;S/Cor&lt;/label&gt; &lt;/div&gt; &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="s_sau" value="1" id="s_sau"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;S/Sau&lt;/label&gt; &lt;/div&gt;
  
      &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  &lt;div class="col-sm-1 nopadding"&gt;   &lt;div class="form-group"&gt;   &lt;div class="input-group"&gt;
        &lt;button class="btn btn-danger remove" type="button"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;Remove&lt;/button&gt;
        &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  
  &lt;!-- Copy Fields --&gt; &lt;div class="copy hide"&gt; &lt;hr&gt;
  
      &lt;div class="control-group input-group"&gt;
  
  &lt;div class="col-sm-1 nopadding"&gt;   &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
        &lt;select class="mdb-select md-form colorful-select dropdown-primary" id="formule" name="formule"&gt;
          &lt;option value="" disabled selected&gt;Formule&lt;/option&gt;
          &lt;option value="1"&gt;Classique&lt;/option&gt;
          &lt;option value="2"&gt;Big&lt;/option&gt;
          &lt;option value="3"&gt;Veggie&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  &lt;div class="col-sm-2 nopadding"&gt;   &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
        &lt;select class="mdb-select md-form colorful-select dropdown-primary"id="fromage" name="fromage"&gt;
          &lt;option value="" disabled selected&gt;Fromage&lt;/option&gt;
          &lt;option value="1"&gt;Chedar&lt;/option&gt;
          &lt;option value="2"&gt;Tomme&lt;/option&gt;
          &lt;option value="3"&gt;Blue&lt;/option&gt;
          &lt;option value="4"&gt;Chevre&lt;/option&gt;
          &lt;option value="5"&gt;Cantal&lt;/option&gt;
          &lt;option value="6"&gt;Reblochon&lt;/option&gt;
          &lt;option value="7"&gt;Maroille&lt;/option&gt;
          &lt;option value="8"&gt;Sans Fromage&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  &lt;div class="col-sm-1 nopadding"&gt;   &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
        &lt;select class="mdb-select md-form colorful-select dropdown-primary" id="cuisson" name="cuisson"&gt;
          &lt;option value="" disabled selected&gt;Cuisson&lt;/option&gt;
          &lt;option value="1"&gt;Blue&lt;/option&gt;
          &lt;option value="2"&gt;Seignan&lt;/option&gt;
          &lt;option value="3"&gt;A poit&lt;/option&gt;
          &lt;option value="4"&gt;Bien Cuit&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  &lt;div class="col-sm-2 nopadding"&gt;   &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
  
  &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="e_c" value="1" id="e_c"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;Extra Chedar&lt;/label&gt; &lt;/div&gt; &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="e_b" value="1" id="e_b"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;Extra Bacon&lt;/label&gt; &lt;/div&gt; &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="e_a" value="1" id="e_a"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;Extra Autre&lt;/label&gt; &lt;/div&gt;
  
      &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  &lt;div class="col-sm-2 nopadding"&gt;   &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
  
  &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="s_o" value="1" id="s_o"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;S/Oni&lt;/label&gt; &lt;/div&gt; &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="s_sal" value="1" id="s_sal"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;S/Sal&lt;/label&gt; &lt;/div&gt; &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="s_c" value="1" id="s_c"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;S/Cor&lt;/label&gt; &lt;/div&gt; &lt;div class="form-check"&gt;   &lt;input class="form-check-input" type="checkbox" name="s_sau" value="1" id="s_sau"&gt;   &lt;label class="form-check-label" for="defaultCheck1"&gt;S/Sau&lt;/label&gt; &lt;/div&gt;
  
      &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
  &lt;div class="col-sm-1 nopadding"&gt;   &lt;div class="form-group"&gt;   &lt;div class="input-group"&gt;
        &lt;button class="btn btn-danger remove" type="button"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;Remove&lt;/button&gt;
        &lt;/div&gt;   &lt;/div&gt; &lt;/div&gt;
  
        &lt;/div&gt;
  
  &lt;/div&gt;
  
    &lt;/div&gt; &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
  
        $(".add-more").click(function(){
            var html = $(".copy").html();
            $(".after-add-more").after(html);
        });
  
        $("body").on("click",".remove",function(){
            $(this).parents(".control-group").remove();
        });
  
      }); &lt;/script&gt;
  
        &lt;div class="input-group-btn"&gt;
              &lt;button class="btn btn-success add-more" type="button"&gt;&lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;Ajouter&lt;/button&gt;
              &lt;button class="btn btn-primary" type="submit"&gt; Confirmer&lt;/button&gt;
        &lt;/div&gt;
  
  &lt;/form&gt; {% endblock %}
  </code></pre>
  
  
  
  <p>What would be the best way to allow the users to set as many burgers they want?
  I read a little about Flask-WTF but I not sure if that would help in this particular problem and I running out of time for get into a dead end.</p>
  
  <p>Thanks for your answers Stack overflow community.</p>