Including a row index in repeat divider titles

When you are creating a form, you might have a repeated set of data. Depending on how large that set of data is that you are repeating, it may be hard for the user to know how many sets of data they have added, or where they are currently in the repeat. To give the user more context you might want to be able to include the row number in the repeat divider.

For example for a repeat that collects the data for multiple parties, called say 'Party_rpt', you might set the title to Party 1, and then want each subsequent divider to say Party 2, Party 3, etc.

Setting the title is simple, you just need to set the Label property of the repeat, but the Repeat Divider Title property is a bit harder to access. The property in the field properties modal does not accept row specific data, and any attempts to add row specific data will result in the coding appearing in your form literally. So to get around this, you will need to use some form script.

The way to get the row index into the Repeat Divider Title, is to paste the following jquery into the form script.

if ($('.formio-component-Party_rpt').length) { //when the repeat is on the page
  i=1; //set an index
  $('.formio-component-Party_rpt').find('.dividerText').each(function(){ //for each divider
    i++; //increment the index
    $(this).text('Party ' + i); //and change the divider text to Party 2, Party 3 etc.
  });
}

To use words instead of numbers here, you could replace line 5 in the above example with the following:

    index = toWords(i); //get the index in words
    $(this).text('Party ' + index); //and change the divider text to Party two, Party three etc.