JSFiddle - React, Tailwind, and code Playground

by glebcha

HTML

<div class="comments_list">
    <div class="comment_item">
        <div class="comment_body">
            <div class="info">
                <a href="http://test.com/users/test/" class="username">Test</a>
            </div>
            <p>Some parent text</p>
        </div>
        <div class="reply_comments">
            <div class="comment_body">
            <div class="info">
                <a href="http://test.com/users/fred/" class="username">Fred</a>
            </div>
            <p>Some child text</p>
            </div>
        </div>
    </div>
    <div class="comment_item">
        <div class="comment_body">
            <div class="info">
                <a href="http://test.com/users/ken/" class="username">Ken</a>
            </div>
            <p>Another parent text</p>
        </div>
        <div class="reply_comments">
            <div class="comment_body">
            <div class="info">
                <a href="http://test.com/users/jack/" class="username">Jack</a>
            </div>
            <p>Another child text</p>
            </div>
        </div>
    </div> 
</div>

JavaScript

var infobars = document.querySelectorAll('.info');
    var usernames = document.querySelectorAll('.info > .username');

function clickPm(event) { 
        event.preventDefault(); 
        alert(window.location.pathname = '/conversation/' + usernames[1].innerHTML);
}//alert here to show that username passed properly
    

    var newContainer = document.createElement('span');
        newContainer.className = 'container';
    var newBtn = document.createElement('a');
        newBtn.className = 'pmlink';
        newBtn.appendChild(document.createTextNode('send message'));
        newBtn.href="#";
        newBtn.onclick = clickPm;
        newContainer.appendChild(newBtn);
        infobars[1].appendChild(newBtn);