JSFiddle - React, Tailwind, and code Playground

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

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