JSFiddle - React, Tailwind, and code Playground

by Varinder

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<div class="page">
</div>

<div id="addShelf" class="button">+ Shelf</div>
<div id="addSection" class="button">+ Section</div>

<div class="template">
    <div class="accordion">
        <h3 class="accordion-title">accordion title</h3>
        <div class="accordion-content">
            accordion content
        </div>
    </div>
</div>

CSS

.button {
  display: inline-block;
  height: 20px;
	background-color: #2e6e9e;
	font-family: arial;
	font-weight: bold;
	color: #ffffff;
	border-radius: 5px;
	text-align: center;
	margin: 2px 2px 2px 2px;
	cursor: pointer;
}
#addShelf {
	float: right;
  width: 80px;
}
#addSection {
  float: right;
  width: 80px;
}

JavaScript

var shelfConfig = {
    collapsible: true, 
    autoHeight: false, 
    animated: "swing",
    heightStyle: "content"
}

var shelfSectionConfig = {
    active:false,
    collapsible: true, 
    autoHeight: false,
    animated: "swing"
}

var currentShelfNumber = 0;
var currentShelfSectionNumber = 0;

var $page = $(".page");
var $accordionTemplate = $(".template").children();

var $addSection = $("#addSection");
var $addShelf = $("#addShelf");

function getAccordionTemplate() {
     return $accordionTemplate.clone();   
}

function attachAccordionEvents( $accordionElement, accordionType ) {
    if ( accordionType == "shelf" ) {
        $accordionElement.accordion( shelfConfig );
    } else {
        $accordionElement.accordion( shelfSectionConfig );    
    }
    
    return $accordionElement;
}

function generateAccordion( number, accordionType ) {
    var $accordion = getAccordionTemplate();
    var accordionTitle = "twerking bieber?";
        
    if ( accordionType == "shelf" ) {
        accordionTitle = "Shelf " + number;    
    } else {
         accordionTitle = "Shelf Section";
    }
    
    $accordion.find("h3").text( accordionTitle );
    
    var $accordionWithEvents = attachAccordionEvents( $accordion, accordionType );
    
    return $accordionWithEvents;
}

function manageSectionButton() {
    if ( $page.children().length > 0 ) {
        $addSection.show();
    } else {
        $addSection.hide();
    }
}

$addSection.hide();

//events
$addShelf.on("click", function(e) {
    e.preventDefault();
    
    var newShelfNumber = currentShelfNumber + 1;
    var $shelfElement = generateAccordion( newShelfNumber, "shelf" );
    
    currentShelfNumber = newShelfNumber;
    
    $page.append( $shelfElement );
    
    
    manageSectionButton();
});

$("#addSection").on("click", function(e) {
    e.preventDefault();
    
    var newShelfSectionNumber = currentShelfSectionNumber + 1;
    var $shelfSectionElement = generateAccordion( newShelfSectionNumber,...