This is a Scorecard class that was made for my multiplayer "Yahtzee" project. It uses Prototype.js and creates a new instance of a scorecard dynamically using SVG.

JavaScript Prototype JS Example

//////////////////////////////////////////////////////
// Class: Scorecard  								//
// Object that holds data for the user's rolls		//
//////////////////////////////////////////////////////
	
	
// Scorecard constructor
function Scorecard(x,y,side,player) {
	this.x = x;
	this.y = y;
	this.side = side;
	
	//Values
	this.aces;
	this.twos;
	this.threes;
	this.fours;
	this.fives;
	this.sixes;
	this.bonus;
	this.threekind;
	this.fourkind;
	this.fullhouse;
	this.smstr;
	this.lgstr;
	this.yahtzee;
	this.chance;
	
	this.total;
	
	//playerId??
	this.playerId = player;
	
	//create it...
	this.object = this.create();
	document.getElementsByTagName('svg')[0].appendChild(this.object);	
	
	var bonus = document.getElementById(this.playerId+'Bonus');
	d3.select(bonus).classed('locked',true);
	
	//function with no params that sets all values to 0
	//then makes them all red to start.
	this.setScoreNull();
}

//////////////////////////////////////////////////////
// Scorecard : Methods								//
// Description:  All of the methods for the			// 
// Scorecard Class									//
//////////////////////////////////////////////////////
Scorecard.prototype={
	//create it...
	create:function(){
		// Arrays for label sets
		var labelsArrayOne = ['Aces','Twos','Threes','Fours','Fives','Sixes','Bonus'];
		var labelsArrayTwo = ['ThreeKind','FourKind','FullHouse','SmStr','LgStr','Yahtzee','Chance'];		
		
		var score = document.createElementNS("http://www.w3.org/2000/svg","g");	// create svg group to store dice
		score.setAttributeNS(null,"transform","translate("+this.x+","+this.y+")");	//set position	
		
		var countOne = 2;
		var countTwo = 2;
		
		for(r=0;r<=300;r+=50){
			for(i=0;i<=80;i+=80){
				// Cell Group
				var cellG = document.createElementNS("http://www.w3.org/2000/svg","g");
				cellG.setAttributeNS(null,"transform","translate("+i+","+r+")");
				// Actual Rectangle
				var cell = document.createElementNS("http://www.w3.org/2000/svg","rect");
				cell.setAttributeNS(null,"width",'75');
				cell.setAttributeNS(null,"height",'40');
				cell.setAttributeNS(null,"fill",'#DDDDDD');
				cell.setAttributeNS(null,"stroke",'black');
				cell.setAttributeNS(null,"class",'cell');
				cellG.appendChild(cell);
				// Cell Text
				var cellText = document.createElementNS("http://www.w3.org/2000/svg","text");
				cellText.setAttributeNS(null,"class",'cellText');
				(countOne % 2) ? c=this.playerId+labelsArrayOne[Math.floor((countOne/2)-1)] : c=this.playerId+labelsArrayOne[(countOne/2)-1]+'Label';
				cellText.setAttributeNS(null,"id",c);
				cellText.setAttributeNS(null,"x",'10');
				cellText.setAttributeNS(null,"y",'25');
				cellText.setAttributeNS(null,"style",'font-family: Arial;font-size:12px;');
				// Actual Text node
				var text = document.createTextNode(labelsArrayOne[Math.floor((countOne/2)-1)]);
				cellText.appendChild(text);
				cellG.appendChild(cellText);
				score.appendChild(cellG);
				countOne++;
			}
			
			for(i=175;i<=255;i+=80){
				// Cell Group
				var cellG = document.createElementNS("http://www.w3.org/2000/svg","g");
				cellG.setAttributeNS(null,"transform","translate("+i+","+r+")");
				// Actual Rectangle
				var cell = document.createElementNS("http://www.w3.org/2000/svg","rect");
				cell.setAttributeNS(null,"width",'75');
				cell.setAttributeNS(null,"height",'40');
				cell.setAttributeNS(null,"fill",'#DDDDDD');
				cell.setAttributeNS(null,"stroke",'black');
				cell.setAttributeNS(null,"class",'cell');
				cellG.appendChild(cell);
				// Cell Text
				var cellText = document.createElementNS("http://www.w3.org/2000/svg","text");
				cellText.setAttributeNS(null,"class",'cellText');
				(countTwo % 2) ? d=this.playerId+labelsArrayTwo[Math.floor((countTwo/2)-1)] : d=this.playerId+labelsArrayTwo[(countTwo/2)-1]+'Label';
				cellText.setAttributeNS(null,"id",d);
				cellText.setAttributeNS(null,"x",'10');
				cellText.setAttributeNS(null,"y",'25');
				cellText.setAttributeNS(null,"style",'font-family: Arial;font-size:12px;');
				// Actual Text Node
				var text = document.createTextNode(labelsArrayTwo[Math.floor((countTwo/2)-1)]);
				cellText.appendChild(text);
				cellG.appendChild(cellText);
				score.appendChild(cellG);
				countTwo++;
			}
		}
		
		
		var totalCell = document.createElementNS("http://www.w3.org/2000/svg","text");
		if(this.side == 'left'){
			totalCell.setAttributeNS(null,"id",'leftTotal');
			totalCell.setAttributeNS(null,"x",'0');
		} if(this.side == 'right'){
			totalCell.setAttributeNS(null,"id",'rightTotal');
			totalCell.setAttributeNS(null,"x",'300');
		}
		totalCell.setAttributeNS(null,"y",'400');
		totalCell.setAttributeNS(null,"style",'font-family: Arial;font-size:30px;');
		var totalText = document.createTextNode('0');
		totalCell.appendChild(totalText);
		score.appendChild(totalCell);
		
		
		var cells = document.getElementsByClassName('cell');
		
		return score;
	},
	// Return Number
	getNum:function(boxVal){
		var box = document.getElementById(this.playerId+boxVal);
		return $(box).text();
	},
	// Change Box Number
	changeBox:function(boxChange,value){
		var box = document.getElementById(this.playerId+boxChange);
		$(box).html(value);
	},
	// Change Total
	changeTotal:function(value){
		var box = document.getElementById(this.side+'Total');
		$(box).html(value);
		this.total = value;
	},
	// lock box
	lockBox:function(boxChange){
		var box = document.getElementById(this.playerId+boxChange);
		//addClass locked
		d3.select(box).classed('locked',true);
	},
	// Set Scorecard numbers
	setScore:function(scoreArr){
		//Array format
		//Aces,Twos,Threes,Fours,Fives,Sixes,Bonus,ThreeKind,FourKind,FullHoue,SmStr,LgStr,Yahtzee,Chance		
		var labelsArray = ['Aces','Twos','Threes','Fours','Fives','Sixes','Bonus','ThreeKind','FourKind','FullHouse','SmStr','LgStr','Yahtzee','Chance'];		
		
		for(i=0;i<labelsArray.length;i++){
			this.changeBox(labelsArray[i],scoreArr[i]);
		}
		
		//Values
		this.aces = scoreArr[0];
		this.twos = scoreArr[1];
		this.threes = scoreArr[2];
		this.fours = scoreArr[3];
		this.fives = scoreArr[4];
		this.sixes = scoreArr[5];
		this.bonus = scoreArr[6];
		this.threekind = scoreArr[7];
		this.fourkind = scoreArr[8];
		this.fullhouse = scoreArr[9];
		this.smstr = scoreArr[10];
		this.lgstr = scoreArr[11];
		this.yahtzee = scoreArr[12];
		this.chance = scoreArr[13];
	},
	// Set Scorecard numbers to zero
	setScoreNull:function(){
		var nullArr = [0,0,0,0,0,0,0,0,0,0,0,0,0,0];		
		var labelsArray = ['Aces','Twos','Threes','Fours','Fives','Sixes','Bonus','ThreeKind','FourKind','FullHouse','SmStr','LgStr','Yahtzee','Chance'];		
		
		for(i=0;i<labelsArray.length;i++){
			this.changeBox(labelsArray[i],nullArr[i]);
			var cell = document.getElementById(this.playerId+labelsArray[i]);
			//cell.css('fill','red');
			d3.select(cell).classed('redText',true);
		}
	}
}