JSFiddle - React, Tailwind, and code Playground

by Sherali Turdiyev

HTML

<div class="patch-cell">
    <div class="fader-number">test</div>
</div>
<div class="patch-cell">
    <div class="fader-number">test</div>
</div>
<div class="patch-cell">
    <div class="fader-number">test</div>
</div>
<div class="patch-cell">
    <div class="fader-number">test</div>
</div>
<div class="patch-cell">
    <div class="fader-number">test</div>
</div>

CSS

.patching-numbering {
    margin-left:20px;
}
.patch-cell-test {
    margin-top:20px;
}

JavaScript

var array = ["A", "B", "C"];//you can put other letter
$('.patch-cell').each(function (i) {
    var index = Math.ceil(($(this).index() + 1) / array.length), 
        r = index + " " + array[i % array.length];
    
    $(this)
        .find('.fader-number')
        .append('<span class="patching-numbering">' +r + "</span>");
});