JSFiddle - React, Tailwind, and code Playground
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 class="add">Add List</button>
<button class="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>
...
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;
...
JavaScript
$(document).ready(function () {
$(document).on('click','.add',function () {
alert('Click is bind with add button');
$("ul").append("<li></li>");
$('.day-column').clone().attr('class', '.day-column').insertAfter('.day-column:first');
});
$(document).on('click','.remove',function () {
alert('Click is bind with remove button');
$(".day-column:first").remove('.day-column:first');
});
});