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>
<!--example of how I want it to look--->
<div class="patch-cell-test">
    <div class="fader-number">Example 1 A</div>
</div>
<div class="patch-cell-test">
    <div class="fader-number">Example 1 B</div>
</div>
<div class="patch-cell-test">
    <div class="fader-number">Example 2 A</div>
</div>
<div class="patch-cell-test">
    <div class="fader-number">Example 2 B</div>
</div>

CSS

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

JavaScript

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