JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<div id="secondchild">
    <p>for testing only</p>
</div>
<div>
    <p>should be last</p>
</div>

<div id="chooseCustomFields555" class="wrapper-customfields" tabindex="1">
  <span>Choose Type</span>
  <ul id="chooseCustomField555" class="dropdown">
    <li class="chooseCheckbox"><i class="fa-icon-check"></i>Checkbox</li>
    <li class="chooseAlternatives"><i class="fa-icon-list-ul"></i> Alternatives</li>
    <li class="chooseDropdown"><i class="fa-icon-list-alt"></i> Dropdown</li>
    <li class="chooseTextField"><i class="fa-icon-font"></i> Text</li>
    </ul>
</div>

JavaScript

var field_id = "#chooseCustomField" + "555";
var field_secondchild = "#secondchild";

// new logic
$(field_id).appendTo( field_secondchild ).addClass( "metro three-d");

// easier way to assign a click event to each li
$(field_id + ' li').on("click", function() {
    alert($(this).attr('class'))
});



/* your original code 
$(field_id).appendTo( field_secondchild )
    .addClass("metro three-d")
    .click(function() {
        $(field_id + ' li').each(function() {
            alert($(this).attr('class'))
        });
    }); 
*/