JSFiddle - React, Tailwind, and code Playground

HTML

<div class="initial"></div>
<div class="name">Bob Smith</div>

<div class="initial"></div>
<div class="name">Jim Halpert </div>

<div class="initial"></div>
<div class="name">Billy Baldwin</div>

<div class="initial"></div>
<div class="name">Frank Redhot</div>

JavaScript

var names = document.querySelectorAll(".name");
var initials = document.querySelectorAll(".initial");

function addInitial(item){
 item.previousSibling.previousSibling.innerHTML = item.textContent.charAt(0);
}

names.forEach(addInitial);