JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <div class = "classname" id = 'D'> <button name='lol' type='button'>Click to see div id</button></div> 
    <br>
    <div class = "classname" id = 'LOL'> <button name='lol' type='button'>Click to see div id</button></div>
     <br>
    <div class = "classname" id = 'OK'> <button name='lol' type='button'>Click to see div id</button></div> 
     <br>
    <div class = "classname" id = 'HEHE'> <button name='lol' type='button'>Click to see div id</button></div> 
     <br>
    <div class = "classname" id = '1234'> <button name='lol' type='button'>Click to see div id</button></div> 
    
    
    
    
</body>
</html>

CSS

.classname{
    
    
    
    
    
    background-color: blue;
}

JavaScript

$('button').click(function() {
    var $p = $(this).parent(),
        id = $p.attr('id');
    if (!$p.find('.id').size()) { 
        $p.append('<span class="id">'+id+'</span>');
    }
});