Simple class for creating bootstrap button groups.

btngroup.js

var btngroup=function(){
	this.desc="Simple class for creating bootstrap button groups";
};
btngroup.prototype={
	addBtnGroup:function(p){
		p.container.innerHTML="";
		p.bscont=document.createElement("div");
		p.bscont.setAttribute("class","btn-group");
		p.bscont.setAttribute("role","group");
		p.bscont.setAttribute("aria-label","...");
		p.container.appendChild(p.bscont);
		this.bscont=p.bscont;
		if(p.buttons!=undefined){
			this.buttons=p.buttons;
			this.setupBtnGroup(p.buttons);
		}
		return this;
	},
	addBtn:function(p){
		var obj=this;
		var btn=document.createElement("button");
		btn.setAttribute("type","button");		
		for(var i in p){
			if(i=="bcolor"){
				btn.setAttribute("class","btn btn-"+p[i]);
			}else if(i=="text"){
				var text=document.createElement("span");
				text.innerHTML=p[i];
				btn.appendChild(text);
			}else if(i=="icon"){
			 	var icon=document.createElement("i");
			 	icon.className=p[i];
			 	btn.appendChild(icon);
			}else if(i=="goback"){
				if(p[i]){
					btn.addEventListener("click", function(){
					    obj.bscont.innerHTML="";
						obj.setupBtnGroup(obj.buttons);
					});
				}				
			}else if(i=="onclick"){
				if(typeof p[i]=="object"){
					btn[i]=function(){
						obj.bscont.innerHTML="";
						obj.setupBtnGroup(p[i]);
					};					
				}else{					
					btn[i]=p[i];
				}
			}		
		}
		this.bscont.appendChild(btn);	
	},
	setupBtnGroup:function(p){
		for(var i in p){
			this.addBtn(p[i]);
		}		
	}
};

//example

new btngroup().addBtnGroup({
	container:document.body,
	buttons:[{
			icon:"glyphicon glyphicon-floppy-disk",
			text:" SAVE",
			bcolor:"primary",
			onclick:[
					{
					icon:"glyphicon glyphicon-thumbs-up",
					text:" CONFIRM",
					bcolor:"info",
					goback:true,
					onclick:[
							{
							icon:"glyphicon glyphicon-ok-sign",
							text:" I'm sure",
							bcolor:"default",
							goback:true,
							onclick:function(){
								console.log("I'm sure");
								}
							},{
							icon:"glyphicon glyphicon-remove-sign",
							text:" I am not sure",
							bcolor:"danger",
							goback:true,
							onclick:function(){
								console.log("I am not sure");
								}
							}
						]
					},{
					icon:"glyphicon glyphicon-thumbs-down",
					text:" QUIT",
					bcolor:"warning",
					goback:true,
					onclick:function(){
						console.log("QUIT");
						}
					}
				]
			},{
			icon:"glyphicon glyphicon-arrow-left",
			text:" Back",
			bcolor:"danger",
			onclick:function(){
				 console.log("go Back");
				}
			}
	]
});