JSFiddle - React, Tailwind, and code Playground

HTML

<div id="name">Bob Smith</div>
<hr>
<div id="fname"></div>
<div id="lname"></div>

CSS

#name {
    padding: 10px;
    margin: 10px;
    background: #ccc;
    border: 1px solid #f0f;
    cursor: pointer;
    width: 70px;
}

#fname {
    padding: 10px;
    margin: 10px;
    background: #ccc;
    border: 1px solid #0ff;
    width: 70px;
}
#lname {
    padding: 10px;
    margin: 10px;
    background: #ccc;
    border: 1px solid #ff0;
    width: 70px;
}

JavaScript

function displayAddy() {

    var parts = $(this).css("backgroundPosition").split(" ");

    $('#fname').html(parts[0]);
    $('#lname').html(parts[1]);
}

$('#name').on("click", displayAddy);