JSFiddle - React, Tailwind, and code Playground

by jjay225

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>
    
       
</head>
<body>
    <div class="containerDiv">
        <input class="Submit" type="submit" value="First" />
    </div>
    <div class="containerDiv">
        <input class="Submit" type="submit" value="Second" />
    </div>
</body>
</html>

CSS

.containerDiv
        {
            border: 3px solid red;
        }
        
        .logRow
        {
            border: 1px solid blue;
            padding: 5px 5px 5px 5px;
            margin: 5px 5px 5px 5px;
            background-color:Yellow;
        }
        
         .childDiv
        {
            background-color:red;
        }

JavaScript

$(document).ready(function () {

            var myButton= $('.Submit')
            var childHTML = '<div class="childDiv">' + 'SUCESSS'+ '</div>';
            

            myButton.click(function () {

                var requiredTable = $(this).closest('.containerDiv');

                for (i = 0; i < 4; i++) {

                    var sentDate = i;
                    var viewRecipientsButtonHTML = '<input class="viewRecipientsButton" type="button" id="ViewReceipt'+i +'" value="View Recipients"  />';
                    var divToAppend = '<div class="logRow">' + '<div class="dateDiv">' + sentDate + '</div>' + '<div class="viewRecipientsDiv">' + viewRecipientsButtonHTML + '</div>' + ' </div>';
                    $(requiredTable).append(divToAppend);
                }

            });



        }
);