I am attempting to design a layout with 2 rows of 6 rectangles grouped as one element.
In addition, I wish to include a plus button that will reveal a new set of rectangles above or below the original ones when clicked. The placement of the new set will depend on which plus button is clicked.
My goal is to achieve the following:
https://i.sstatic.net/P26sC.png What I have experimented with/discovered so far:
$(function () {
$(".repeat").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
//$self.remove();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div class="repeatable">
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat">Add Another</button>
</div>
<input type="submit" value="Submit" />
</form>The provided example only functions for forms. Does anyone have suggestions on how I can adapt this for my specific requirements?