<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery Repeater Demo</title>
<!-- Bootstrap isn't required. I'm just using it for the demo. -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.repeatable {
padding-bottom: 20px;
}
.repeatable.repeatable-button-in .repeater-add {
display: none;
}
.repeatable.repeatable-button-in:last-child .repeater-add {
display: block;
}
.repeatable.repeatable-button-in:last-child .repeater-remove {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>JQuery Repeater Demo</h1>
<p>Get it on <a href="https://github.com/incraigulous/jquery-repeater">Github</a> or <a href="http://bower.io/search/?q=jquery%20repeater">Bower</a>.</p>
<form role="form">
<div class="repeatable">
<div class="form-group">
<label>Field 1:</label>
<input type="text" class="form-control" id="foo-bar" name="foo[][bar]">
</div>
<div class="form-group">
<label>Field 2:</label>
<input type="text" class="form-control" id="foo-baz" name="foo[][baz]">
</div>
<button class="btn btn-danger repeater-remove" type="button"><span class="glyphicon glyphicon-minus"></span></button>
<button class="btn btn-success repeater-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
</div>
</form>
</div>
<!-- jQuery and class.js are required -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/class.js/src/class.min.js"></script>
<script src="jquery-repeater.js"></script>
<!-- Bootstrap isn't required. I'm just using it for the demo. -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
//All options are optional.
new Repeater($('.repeatable'), {
addSelector: '.repeater-add', //The css selector for the add button.
addSelectorOut: false, //Set to true if the add selector is outside the repeater wrap.
removeSelector: '.repeater-remove', //The css selector for the remove button.
withDataAndEvents: false, //Should data and events on repeatable sections be cloned?
deepWithDataAndEvents: false, //Should data and events of repeatable sections descendants be cloned?
addCallback: function(){
console.log("Am I repeating myself?");
}, //A callback function that generated repeatable sections will be passed into.
wrapperHtml: "<div class='repeater-wrap'></div>" //HTML for an element to wrap all repeatable sections in.
});
</script>
</body>
</html>