JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<div class="add-row" style="background:red; cursor: pointer; width:110px; height:20px; color:white;font-size:18px; padding:4px;">ADD List Item</div>
<ul class="main-list">
    <li class="item item_standard haslink gallery isotope-item">
        <div class="layout-stand layout-con-style">
            	<h2>
                    Not Clickable
				</h2>

            <p>Lorem ipsum.</p>
            <ul class="like_icon_intip clearfix"></ul>
        </div>
    </li>
</ul>

JavaScript

function createRow() {

    var row = ' <li class="item item_standard haslink gallery isotope-item"  style="background:yellow; cursor: pointer;">';
    row += '<div class="layout-stand layout-con-style">   	<h2>Click Anywhere Inside</h2>';
    row += '<div class="clickHello">';
    row += '<p>Text I can control.</p>';
    row += '</div>';
    row += '<ul class="like_icon_intip clearfix"></ul>';
    row += '</div>';
    row += '</li>';
    $('ul.main-list').append(row);

    return false;
}

$(document).ready(function () {
    $(".add-row").on("click", function (event) {
        createRow();
    });
});

$(document).ready(function () {
    $('.clickHello').parent().parent().css('background-color', 'red');
});