JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <span id="dupe1" class="foo"></span>
    <span id="dupe2" class="foo"></span>
    <span id="dupe3" class="bar"></span>
    <span id="dupe3" class="bar"></span>
    <span id="dupe1" class="foo"></span>
    <span id="dupe4" class="baz"></span>
    <span id="dupe2" class="foo"></span>
    <span id="dupe1" class="foo"></span>
</div>

JavaScript

var cls = 'foo';
$('.' + cls).each(function() {
    var me = this;
    var id = $(me).attr('id');
    var dupes = $('#' + id + '.' + cls);
    dupes.each(function() {
        if(this != me) {
            $(this).attr('id', id + '_r_' + Math.random());
        }
        else {
            $(this).attr('id', id + '_o');
        }
    });
});

console.log($('#parent').html());