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').each(function(i) {
    $(this).find('.fader-number').append('<span class="patching-numbering">' + Math.floor(i / 2 + 1) + (i % 2 ? 'B' : 'A') + "</span>");
});