JSFiddle - React, Tailwind, and code Playground

by equiroga

HTML

<body class="plan-pad stripe-white">
	<article idhttp://jsfiddle.net/#save="timeline-container"> 
        <!--Day Schedule-->
		<section id="days">
            
<!--------Target Div to remove and append duplicate div after--------> 
			<section class="day-column">
<!--------Target Div to remove and append duplicate div after-------->
                
				<header>
					<h1>Day 1 <span>Sept 4, 2013</span></h1>
					<div class="locations">
						<span class="location">Location 1</span>
                        
<!----------------------Add and Remove buttons--------------------->
   
                       <button id="add">Add List</button>
          				<button id="remove">Remove List</button>
                        
<!--------------------Add and Remove buttons-------------------->
                        
                        <div class="clear"></div>
					</div>
				</header>
				<div class="timeline-cards">
					<div class="drop-target" style="top: 545px;"></div>
                    <p>Insert Drag Cloumns here.</p>
                   <ul id="sortable1" class="connectedSortable">
  						<li class="ui-state-default invisible">Item 1</li>
  						<li class="ui-state-default invisible">Item 2</li>
  						<li class="ui-state-default invisible">Item 3</li>
  						<li class="ui-state-default invisible">Item 4</li>
  						<li class="ui-state-default invisible">Item 5</li>
					</ul>  
				</div>
			</section><!--------------------------Day Column end-------------------------------->
            
            <!--Day Columns-->
			<section class="day-column">
				<header>
					<h1>Day 2 <span>Sept 5, 2013</span></h1>
					<div class="locations">
						<span class="location">Location 2</span>

<!----------------------Add and Remove buttons--------------------->
   
                       <button id="add">Add List</button>
          				<button id="remove">Remove List</button>
                        
<!--------------------Add and Remove buttons-------------------->
 ...

CSS

/*Card height properties*/
#wishlist-plan #card-slider{
	height:92px;
	margin:12px 0 0 -105px;
	padding:0 0 0 20px;
	overflow:hidden}
	
	
#wishlist-plan #card-slider #card-holder{width:9999999999999999999999999px;height:92px}

#wishlist-plan #card-slider .card{float:left;margin:0 10px 0 0}
#wishlist-plan a.wishlist-scroll{
	display:block;
width:39px;
height:28px;
background-color:#dddcdd;
background-repeat:no-repeat;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;position:absolute;top:13px}

#wishlist-plan a.wishlist-scroll:hover{background-color:#403249}
#wishlist-plan a.wishlist-scroll:active{background-color:#68497b}
#wishlist-plan a.wishlist-scroll.left{left:20px;background-image:url("../i/icon-btn-arrow-left.png");background-position:-2px center}#wishlist-plan a.wishlist-scroll.right{right:20px;background-image:url("../i/icon-btn-arrow-right.png");background-position:12px center}

#timeline-container{position:absolute;top:302px;left:0;right:0;bottom:0;overflow-x:auto;overflow-y:auto}#time-scale{width:80px;background:#f8f7f9;border-right:solid 1px #e6e6e6;position:absolute;top:0;left:0;bottom:0;z-index:900;height:5410px}#time-scale ul{margin:78px 0 0 0;padding:0 14px;line-height:55px;color:#888;text-align:right}#time-scale ul .hour{color:#666}
#days{padding-left:81px;width:9999px;background:#fff url("../i/timeline-row.png") repeat left 105px;position:relative}

.day-column{
	width:300px;
height:5410px;
float:left;
border-right:solid 1px #e6e6e6;
position:relative}

.day-column header{padding:26px 24px 5px;height:60px;background:transparent url("../i/timeline-header.png") repeat-x left top;position:absolute;top:0;left:0;right:0;z-index:901}.day-column header.scrolled{height:101px}.day-column header h1 span{color:#cdcdcd;font-size:14px;margin-left:5px}.day-column header .locations{height:14px;margin-top:3px}.day-column header a.x{top:33px;right:28px}.day-column header...

JavaScript

$(document).ready( function() {
     
 $("#add").click( function() {
    $("ul").append("<li></li>");
    $('.day-column').clone().attr('class','.day-            column').insertAfter('.day-column:first');
 });
 
  $("#remove").click( function() {
    $(".day-column:first").remove('.day-column:first');
 });
 
});