javascript – 在没有#id的情况下定位DIV,添加#id

我是 JavaScript和CSS的新手,我的技能充其量也很差.我知道如何解决我的问题,但我没有解决它的知识.
我有这样的代码：

<div class="detail">
    <div class="detail-group"></div>
    <div class="detail-group"></div>
    <div class="detail-group"></div>
</div>

我必须在每个.detail-group DIV中附加一个带有唯一#id的现有DIV.我必须指定.detail-group,即使它们完全相同.我无权访问HTML以手动编辑它.
如果我是正确的,我最好的方法是使用JS为那些.detail-group DIV设置ID.
我用CSS用它来定位每一个并创建一个区别：

.detail-group:nth-child(1) { padding-right: 0.01px }
.detail-group:nth-child(2) { padding-right: 0.02px }
.detail-group:nth-child(3) { padding-right: 0.03px }

但我不知道如何用JS检测这种差异并使用它.
是否有可能区分JS中元素的顺序？如果有,怎么做.以及如何为他们添加ID？

请注意,我正在使用Enjin模块,这就是为什么我无法访问他们的HTMl.如果有人有这方面的经验,将不胜感激.

$('.detail-group').attr('id',function(i) {
  return 'detailgroup'+(i+1);
});