Working with WTForms FieldList
I used something like this with my FieldList/FormField to allow adding more entries:
$(document).ready(function () { $('#add_another_button').click(function () { clone_field_list('fieldset:last'); });});function clone_field_list(selector) { var new_element = $(selector).clone(true); var elem_id = new_element.find(':input')[0].id; var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1; new_element.find(':input').each(function() { var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-'); $(this).attr({'name': id, 'id': id}).val('').removeAttr('checked'); }); new_element.find('label').each(function() { var new_for = $(this).attr('for').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-'); $(this).attr('for', new_for); }); $(selector).after(new_element);}
Remove buttons would be much trickier.
(Code mostly borrowed from answer to Dynamically adding a form to a Django formset with Ajax.)
From your description, I can't see why Ajax is particularly needed, though of course you do need JavaScript logic to add/remove rows. I've implemented this functionality using WTForms, but with with no special support from WTForms itself; you just need to ensure that when you create client-side widgets, you do this using field names that WTForms will parse correctly into the server-side list. You can clone an existing row using client-side JavaScript to add rows, so that the rendering of a row is consistent across rows generated server-side and rows created client-side.