Add a text to the buttons in a matrix

I have a matrix widget and I use the code below to set an image for each button in the widget. This works great.

The next thing I want to do is give each button a number. How would I do this, can a similar thing be done in the HTML? Thanks!

.widget {font-size: 0;
background-size: cover;

}

JS{

var css = ""
for (var i=1; i<=36; i++) {
css += .widget:nth-child(${i}) { background-image: url("/Thumbnails/12-${i}.png"); }
}
return css

}

Hi,

Maybe have a look at CSS Counters for Custom List Styling | CSS-Tricks - CSS-Tricks

Using the matrix' props to set the button's label should do as well

// matrix.props
JS{
var props = {}

props.label = $

return props
}