How to add a sequential number for each row in the Configurable List widget?

I have created a configurable list with several fields of data representing one "observation". We will often make several of these observations by selecting "add" button. I would like each added observation to create a sequential number essentially counting the entries. What CSS code can accomplish this? I'm currently using (Number: static: 1:1 mm) but it only creates the number 1 for each observation. Any help would be appreciated as I am not a coder. Thanks!

Hi Matthew,

Thanks for reaching out to Jotform Support. You can inject the provided CSS code into the Configurable List widget to add an auto-increment number for each row. You may also remove the static text in the widget. Here's how to do it:

1. Select the Configurable List widget and click the Wand icon.
2. Remove the Static (Number) text in the Field Configuration box.
3. Go to the Custom CSS tab and inject the CSS code below:

/* Add an auto-increment value for each row in the Configurable List widget | Thread: 14639281 */

div#list {

  counter-reset: my-sec-counter;

}



.configurable-list-field-row-wrapper::before {

  content: "Number: "counter(my-sec-counter);

  counter-increment: my-sec-counter;

}

/* END */



You can test my demo form or clone it to see the changes made in the cloned form. 

Give it a try, and let us know how it goes.

You guys rock! Worked like a charm. Thank you!