I've got the code below which works fine, however the jquery to add the items doesnt find the data-parent-room value and just returns undefined. This is the only thing not working :(
HTML:
<div id="inventoryRooms">
<!--BOX SHART-->
<div class="widget box formHolder" data-parent-room="1">
<!--ROOM NAME-->
<form class="widget-header rooms">
<input type="text" placeholder="Type Room name" name="roomName[]" class="form-input add-room-input input-width-xxlarge">
<input type="hidden" class="roomId" name="roomId[]">
<input type="hidden" class="inventoryId" name="inventoryId[]" value="<?=$_GET['inventory_id']?>">
<div class="toolbar no-padding">
<div class="btn-group">
<span class="btn saveRoom"><i class="icon-ok"></i> Save Room</span>
</div>
</div>
</form>
<!--/END-->
<!--GENERIC ROW TITLES-->
<div class="widget-header header-margin hide">
<div class="row row-title">
<div class="col-md-3"><h5>ITEM</h5></div>
<div class="col-md-3"><h5>DESCRIPTION</h5></div>
<div class="col-md-3"><h5>CONDITION</h5></div>
<div class="col-md-2"><h5>PHOTOGRAPH</h5></div>
<div class="col-md-1 align-center"><h5><i class="icon-cog"> </i></h5></div>
</div>
</div>
<!--/END-->
<!--ADD ITEM-->
<div class="items">
</div>
<!--/END-->
<div class="toolbar-small">
<div class="btn-group">
<span class="btn addItem"><i class="icon-plus"></i> Add Item</span>
<span data-toggle="dropdown" class="btn dropdown-toggle"><i class="icon-gear"></i> Options<span class="button-space"></span><i class="icon-angle-down"></i></span>
<ul class="dropdown-menu pull-right">
<li><i class="icon-trash"></i> Delete Room</li>
</ul>
</div>
</div>
</div>
</div>
jQuery:
$(document).on('click','.addItem', function(){
$('<!--ROW START-->\
<form class="widget-content item">\
<div class="row">\
<div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<input type="hidden" class="itemId" name="itemId[]" value="">\
<input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
<input type="hidden" name="itemParent[]" value="'+$(this).closest().attr('data-parent-room')+'">\
<div class="col-md-2">\
<div class="fileinput-holder input-group">\
<input id="fileupload" type="file" name="files[]" data-url="uploads/">\
</div>\
</div>\
<div class="col-md-1 align-center"><i class="save icon-ok large"> </i> <i class="delete icon-trash large"> </i></div>\
</div>\
</form>\
<!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items'));
$(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
});
Like i say, it all works fine apart from that damn data-parent-room value. Any help is appreciated! using jQuery 1.10.1
You need to pass a selector to closest
//since the attribute data-parent-room is for the `formHolder` element
$(this).closest('.formHolder').att('data-parent-room')
or
//find the closest element with attribute data-parent-room
$(this).closest('[data-parent-room]').att('data-parent-room')
instead of using .att('data-parent-room'), you can use .data('parentRoom') also
You need to tell what closest parent you want in selector. Pass the class you have with div having attribute data-parent-room
$(this).closest('.widget.box.formHolder').attr('data-parent-room')
It would be better if you use data() instead of attr for addressing data
$(this).closest('.widget.box.formHolder').data('parent-room')
$(this).closest('[data-parent-room]').data('parent-room');
Related
I want to access element of this dynamically created div. This is the html
<div id="uploader">
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange">
<img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon">
<span class="upl" id="upload">Upload document</span>
<input type="file" class="upload up" id="up" onchange="readURL(this);">
</div>
<!-- btn-orange -->
</div>
<!-- col-3 -->
<div class="col-sm-8">
<input type="text" class="form-control" name="" id="document_name" placeholder="Document Name">
</div>
<!--col-8-->
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
<!-- col-1 -->
this is the part that is dynamically created
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload3">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8"><input type="text" class="form-control" id="Doc3note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
I have a file upload handler called readURL()
function readURL(input) { }
what I want to get is the id of a specific div, so I tried this and many other unsuccessful methods
function readURL(input) {
console.log($(input).closest('.col-sm-8').find(".form-control").attr('id'));
}
I hope my explanation is clear, I want to get the id of class="col-sm-8" on file upload. how can implement this?
Passing the id up (uploadFile input)
Execute this: $(input).parent().parent().next()
Look at this code snippet
function readURL(input) {
console.log('Id of Div: ' + $(input).parent().parent().next().attr('id'));
console.log('Id of form-control input: ' + $(input).parent().parent().next().find(".form-control").attr('id'));
}
readURL('#up');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload3">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8" id='div(col-sm-8)'><input type="text" class="form-control" id="Doc3note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
Resources
.parent()
.next()
I have different file inputs I want displayed once the previous one has been selected. At the moment I have
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="input-group inputMargBtm">
<input type="text" class="form-control" id="fileOneContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="filePadd">
<div class="input-group">
<div id="hideDivTwo" class="hiddenDiv">
<input type="text" class="form-control" id="fileTwoContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
But I also have a lot more hidden rows for up to 10 inputs. So I dont need to create new code for each input within my Javascript, I am trying to display things dynamically. Essentially, if I select a file, it should display the next file input.
At the moment I have this
$(".fileGroup").on('change',function(){
var id = $(this).attr('id');
if (id.length) {
$(this).parents('.row').nextSibling('.row').child('.hiddenDiv').css("display", "table-footer-group");
}
});
So I get the id of the changed fileGroup. I then attempt to get its parents row, then get the next row, and display its hidden div. At the moment this does not seem to work. What would be the best way to display the next input block?
Thanks
Try with this code:
$(".fileGroup").on('change',function(){
var $next_element = $(this).parents('.row').next('.row').find('input[type="file"]');
if ($next_element.length) {
$next_element.prop('disabled', false);
}
});
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="input-group inputMargBtm">
<input type="text" class="form-control" id="fileOneContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="filePadd">
<div class="input-group">
<div id="hideDivTwo" class="hiddenDiv">
<input type="text" class="form-control" id="fileTwoContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
The code is rather simple:
1. grab .row parent
2. look for the next element with .row class
3. find an file input in the next .row element
4. if the input exists, set its disabled attribute to
false
I am using repeater.js to repeat a div with some input fields and button, but the problem is that i want to give each and every div a unique id so that i can extract data from all the fields of that particular div input elements.
this is the HTML Code:
<div class="form-group mt-repeater">
<a href="javascript:;" data-repeater-create class="btn btn-circle purple mt-repeater-add">
<i class="fa fa-edit"></i> Repeat Field
</a>
<div data-repeater-list="group-b">
<div data-repeater-item class="mt-repeater-item">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" id="dosage_form" class="form-control typeahead-findings circle-input" placeholder="Dosage Form">
<label for="dosage_form">e.g. Tablet / Syrup / Capsule etc.</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" id="brand_name" class="form-control typeahead-findings circle-input" placeholder="Brand / Generic Name">
<label for="brand_name">e.g. Dytor</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input class="form-control circle-input" id="contents" type="text" placeholder="Contents" />
<span class="help-block"> e.g Paracetamol </span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" id="dose" class="form-control typeahead-findings circle-input" placeholder="Dose">
<label for="dose">e.g. 20 mg / 20 ml</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input class="form-control circle-input" id="dose_regimen" type="text" placeholder="Dose Regimen" />
<span class="help-block"> e.g 1-1-1-1 </span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" id="therapy_duration" class="form-control typeahead-findings circle-input" placeholder="Therapy Duration">
<label for="therapy_duration">e.g. 1 Day / 1 Month etc.</label>
</div>
</div>
</div>
<div class="col-md-1 col-sm-6 col-xs-6">
<i class="fa fa-plus"></i>
</div>
<div class="col-md-1 col-sm-6 col-xs-6">
<i class="fa fa-minus"></i>
</div>
</div>
</div>
</div>
every time i click on the add repater button this div gets replicated but what i also want is that the new div generated should have a unique div id also the curresponding elemnts inside it should have a class or id starting with that id so that data extraction can be easy for that particular div
I was using this Jquery code:
$(".addData").on('click' ,function()
{
alert("hi");
});
This is the repeater i am using: https://pastebin.com/n7g7tdTH
but this code only runs for the very first div on the later generated dynamic divs it doesn't run. I also tried editing the repeater.js but no success because its all dynamic and i am not able to understand where i should edit that code to add a dynamic data-counter value for the div and the corresponding elements.
Can anyone help with this logic?
Another option, to retrieve field values would be to rename all input field id with name (example below) and use repeater.js repeaterVal() to get all the field values .
$(".mt-repeater").repeater();
$("#getVal").click(function () {
$('.mt-repeater').repeaterVal()["group-b"].map(function(fields){
//fields contain the collection of input fields per row
console.log(fields["dosage_form"]);
console.log(fields["brand_name"]);
//....
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="form-group mt-repeater">
<a href="javascript:;" data-repeater-create class="btn btn-circle purple mt-repeater-add">
<i class="fa fa-edit"></i> Repeat Field
</a>
<div data-repeater-list="group-b">
<div data-repeater-item class="mt-repeater-item">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" name="dosage_form" class="form-control typeahead-findings circle-input" placeholder="Dosage Form">
<label for="dosage_form">e.g. Tablet / Syrup / Capsule etc.</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" name="brand_name" class="form-control typeahead-findings circle-input" placeholder="Brand / Generic Name">
<label for="brand_name">e.g. Dytor</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input class="form-control circle-input" nam="contents" type="text" placeholder="Contents" />
<span class="help-block"> e.g Paracetamol </span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" name="dose" class="form-control typeahead-findings circle-input" placeholder="Dose">
<label for="dose">e.g. 20 mg / 20 ml</label>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input class="form-control circle-input" name="dose_regimen" type="text" placeholder="Dose Regimen" />
<span class="help-block"> e.g 1-1-1-1 </span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<input type="text" name="therapy_duration" class="form-control typeahead-findings circle-input" placeholder="Therapy Duration">
<label for="therapy_duration">e.g. 1 Day / 1 Month etc.</label>
</div>
</div>
</div>
<div class="col-md-1 col-sm-6 col-xs-6">
<i class="fa fa-plus"></i>
</div>
<div class="col-md-1 col-sm-6 col-xs-6">
<i class="fa fa-minus"></i>
</div>
</div>
</div>
</div>
<button id="getVal">Get Value</button>
For the first problem..
but this code only runs for the very first div on the later generated
dynamic divs it doesn't run
You can convert your jquery events into delegated events.. These allow you to catch events on DOM elements based on a selector, so when newer DOM elements are added these are caught too.
So -> $(".addData").on('click' ,function()
As a delegated event becomes -> $(document.body).on("click",".addData" ,function()
The second problem.
but how to get the values from the input field that are present near that button
This can be achieved by traversing up the DOM tree to a parent that surrounds the elements you want,. eg. .row or maybe mt-repeater-cell, as long as it's a DOM element that contains the elements you want to find. Here you can use jquery's closest selector, that will traverse up the tree until it finds the element your after.
So -> $(this).closest('.row').find('#dose_regimen').val()
The above will traverse up the DOM tree until it finds a .row class, we then find element with id dose_regimen etc,.. #dose_regimen and then finally get it's value with .val()
I am coding a webpage that will have three forms for corresponding questions hidden in divs- I'm using a simple .accordion-toggle for this functionality in bootstrap's framework.
When a user chooses the 'Ask a question' button it toggles down (using .accordion-toggle) and a form appears- using hide() the 'Ask a question' link should disappear.
The form will have a Submit button to post the form, but also a cancel link- the cancel link should trigger the form to collapse(using bootstrap .collapse), simultaneously the 'Ask a question' button should reappear.
I'm able to get it working using the show() and hide() method in jQuery. However with three cancel buttons on the same page I'm not sure how to attach a unique identifier to each link to properly collapse the correct div.
The fiddle below is the closest solution thus far.
See #DanielAlmeida Fiddle
https://jsfiddle.net/ek57ao0y/
<div class='form form0'>
<ul>
<li><a href="#" class='showForm' data-target='.form1'>Show form 1</a></li>
<li><a href="#" class='showForm' data-target='.form2'>Show form 2</a></li>
<li><a href="#" class='showForm' data-target='.form3'>Show form 3</a></li>
<li><a href="#" class='showForm' data-target='.form4'>Show form 4</a></li>
</ul>
</div>
<div class='form form1'>
<h3>Form 1</h3>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<p>
<a href="#" class='cancel' data-target='.form0'>Cancel</a>
</p>
</div>
<div class='form form2'>
<h3>Form 2</h3>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<p>
<a href="#" class='cancel' data-target='.form0'>Cancel</a>
</p>
</div>
<div class='form form3'>
<h3>Form 3</h3>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<p>
<a href="#" class='cancel' data-target='.form0'>Cancel</a>
</p>
</div>
<div class='form form4'>
<h3>Form 4</h3>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<p>
<a href="#" class='cancel' data-target='.form0'>Cancel</a>
</p>
</div>
You can do this by changing a bit of your code around.. by making sure you are hiding and showing the correct element. The below should do the job for you.
$(function() {
$(".submit-collapse").click(function(){
$(".contact-form").show();
$(".submit-collapse").hide();
});
$(".cancel-link").click(function(){
$(".contact-form").hide();
$(".submit-collapse").show();
})
});
.contact-form{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-trigger top-spaced hidden-md hidden-sm hidden-xs">
<div class="panel panel-default no-border">
<div class="panel-heading">
<h4 class="drk-grey">
Have another question? <a class="accordion-toggle collapsed collapsed grn-btn full-window-btn submit-collapse" data-parent="#accordion" data-toggle="collapse" href="#question-about-app-process">Submit Your Question </a>
</h4>
</div>
<form class="contact-form" action="/mailers/faq_contact_us" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="L+9iNJ7+yKMBBIFsSv0nEzet6tit4bfxTaoUNbopARhIzoN/GL3fn40AaY1sV095jddz6fXzs0p20axPIfki+A==" />
<div class="spaced">
<label for="name">Name</label><input type="text" name="name" id="name" class="form-control" required="required" />
</div>
<div class="row spaced">
<div class="col-md-6">
<label for="email">Email</label><input type="email" name="email" id="email" class="form-control" required="required" email="true" />
</div>
<div class="col-md-6">
<label for="primary_phone">Phone</label><input type="tel" name="primary_phone" id="primary_phone" class="form-control" required="required" phone="true" />
</div>
</div>
<div class="spaced">
<label for="message">Message</label><textarea name="message" id="message" class="form-control" required="required" rows="10" maxLength="1000">
</textarea>
</div>
<div class="spaced">
<input type="submit" name="commit" value="Submit Question" class="btn btn-small text-center" /><a class="accordion-toggle collapsed collapsed cancel-link" data-parent="#accordion" data-toggle="collapse" href="#question-about-app-process">Cancel</a>
</div></form>
</div>
"I'm not sure how to attach a unique identifier to each link to properly collapse the correct div"
You can use the parent() function. Example: this code removes everything inside the parent div...where this link is:
<div>blablabla something Remove</div>
In your cause, you will not use "remove", call the colapse function instead.
So I have a section to add a color and I got it to dynamically create a copy of the div with a new ID for each dynamic div.
The problem is that once the div is created, I don't know how to close it (i.e. remove it from DOM via a "close" action). I know it's because it's dynamic content. You cant bind event likes the static content, it's will not bind to the elements because they don't appear at the time you bind. I just don't know how to go about getting it to close.
The div I want to close starts with "Color" + incremented number. I hope I explained this correctly and any help would be appreciated. Thanks.
<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12">
<h3>COLOR ROTATION</h3>
<!--Begin color rotation well-->
<div id="color">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
<label class="control-label">Color 1</label>
<input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
</div>
</div>
<div class="col-md-6">
<label class="control-label">DROPDOWNS REQUIRED?</label>
<div class="form-inline">
<div class="radio">
<label>
<input name="optradio" type="radio" />Yes</label>
</div>
<div class="radio">
<label>
<input name="optradio" type="radio" />No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End color rotation well-->
</div>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
Here's the link to the working example:
jsfiddle
Sure, see this updated fiddle;
Essentially you want to bind an event to the document using .on(), like:
$(document).on('click', '.remove', function(e){
$(this).closest('.color-wap').remove();
});
I added the .color-wrap class to the #color div to avoid working with duplicated ID's via cloning, and added the .remove class to the remove button
1)Use the .on() to bind events on dynamically created elements
2)jquery selector ^ can help in selecting the div with id of color-number.
3).animate() to toggle height of the div or .remove if you want to completly remove the element.
$(function() {
var count = 0;
$('#addcolor').click(function() {
count++;
var clonediv = $('#color');
$(clonediv).clone().insertBefore('#color');
$(clonediv).attr("id", "color" + count);
});
$(document).on("click", ".glyphicon-remove-sign", function() {
$(this).closest("div[id^='color']").animate({"height":"toggle"});
//$(this).closest("div[id^='color']").remove();
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12" id="test">
<h3>COLOR ROTATION</h3>
<!--Begin color rotation well-->
<div id="color">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
<label class="control-label">Color 1</label>
<input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
</div>
</div>
<div class="col-md-6">
<label class="control-label">DROPDOWNS REQUIRED?</label>
<div class="form-inline">
<div class="radio">
<label>
<input name="optradio" type="radio" />Yes</label>
</div>
<div class="radio">
<label>
<input name="optradio" type="radio" />No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End color rotation well-->
</div>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>