JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<div id='items'>
    <div style="" class="btn-group item"> 
        <span class="btn-info btn-xs dropdown-toggle fileTypeVisible" data-toggle="dropdown" title="Click to change file type" type="button">
            JS
        </span>

        <ul role="menu" class="dropdown-menu" data-page_id='1'>
            <li class='setFileType_btn' data-setformat_id='1' data-setformat_label='HTML'><a href="#">HTML</a>
            </li>
            <li class='setFileType_btn' data-setformat_id='2' data-setformat_label='JS'><a href="#">JS</a>
            </li>
            <li class='setFileType_btn' data-setformat_id='3' data-setformat_label='CSS'><a href="#">CSS</a>
            </li>
        </ul>
    </div>
</div>

<hr />

<button class='btn'>Go</button>

JavaScript

$(document).on('click', '.setFileType_btn', function(){
    format_id = $(this).attr("data-setformat_id");
    format_label = $(this).attr("data-setformat_label");
    pageid = $( this ).closest( "ul" ).attr("data-page_id");
    $( this ).closest( "ul" ).prev().text('derp');
    
    alert("fid: " + format_id + "\nflabel: " + format_label + "\npid: " + pageid);
});

$('.btn').click(function(){
	$("#items").clone().insertAfter("div#items:last");
});