Use JQuery to extend forms automatically

static/js/forms.js

@@ -0,0 +1,38 @@
+/* For fields repeated as list items */
+
+function autoduplicate() {
+  var new_li = $( this ).clone( true );
+  $( new_li ).find( "label" ).attr( "for", function(index, value) {
+    return value.replace(/-(\d+)(-\w+)?$/, function(str, p1, p2, offset, s) {
+      if ( p2 ) {
+      return '-' + (Number(p1) + 1) + p2;
+      }
+      return '-' + (Number(p1) + 1);
+    });
+  });
+  $( new_li ).find( ":input" ).attr( "id", function(index, value) {
+    return value.replace(/-(\d+)(-\w+)?$/, function(str, p1, p2, offset, s) {
+      if ( p2 ) {
+      return '-' + (Number(p1) + 1) + p2;
+      }
+      return '-' + (Number(p1) + 1);
+    });
+  });
+  $( new_li ).find( ":input" ).attr( "name", function(index, value) {
+    return value.replace(/-(\d+)(-\w+)?$/, function(str, p1, p2, offset, s) {
+      if ( p2 ) {
+      return '-' + (Number(p1) + 1) + p2;
+      }
+      return '-' + (Number(p1) + 1);
+    });
+  });
+  $( new_li ).find( ":input" ).val(function() {return this.defaultValue});
+  $( new_li ).one( "change", autoduplicate );
+  $( this ).after( new_li );
+}
+
+$( ".form-list > li:last-child" )
+  .one( "change", autoduplicate );
+
+$( "input[list='keyword-list']" ).parent().filter(":last-child")
+  .one( "change", autoduplicate );

templates/base.html

@@ -62,5 +62,6 @@ <h1>{% if self.title() %}{{ self.title() }}{% else %}Metadata Standards Catalog{
   </footer>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/forms.js') }}"></script>
 </body>
 </html>

templates/edit-metadata-scheme.html

@@ -43,9 +43,9 @@
         {% endfor %}
       </datalist>
       <div class="form-inline">
-        {% for f in form.keywords %}
+        {% for f in form.keywords -%}
         <span class="{{ state(f) }}">{{ f(list="keyword-list", class="form-control form-control-narrow") }}</span>
-        {% endfor %}
+        {%- endfor %}
       </div>
       {% for f in form.keywords %}
       {{ errors(f) }}