jsで独立したストップウォッチを複数作りたい

ストップウォッチを複数作る方法が分かりません。
一つだけならできたのですが、独立したストップウォッチを複数作るとなると、
不具合が起きてしまいます。
独立した複数のストップウォッチの作り方を教えてください。
よろしくお願いします。
（以下は単体のストップウォッチのコードです）

lang
1<h1>ストップウォッチ</h1>
2	<div id="sec" style="font-size:128px">0.00</div>
3	<input type="button" value="start!" id="run">
4	<input type="button" value="stop!" id="stop">
5	<input type="button" value="reset!" id="reset">

lang
1<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2<script>
3
4$(function(){
5var startTime,
6	timerId,
7	running = false,
8	stopTime;
9
10$('#run').click(function(){
11	run();
12	clickRun();
13});
14
15$('#stop').click(function(){
16	stop();
17	clickstop();
18});
19
20$('#reset').click(function(){
21	reset();
22	clickReset();
23});
24
25function run(){
26
27	if(running) return;
28
29	running = true;
30
31	if (stopTime){
32		startTime = startTime + (new Date()).getTime() - stopTime;
33	}
34
35	if(!startTime){
36		startTime = (new Date()).getTime();
37	}
38	timer();
39}
40
41function timer(){
42	document.getElementById('sec').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(2);
43	timerId = setTimeout(function(){
44		timer();
45	},100);
46}
47
48function stop(){
49	if(!running) return false;
50	running = false;
51	clearTimeout(timerId);
52	stopTime = (new Date()).getTime();
53}
54
55function reset(){
56	if(running) return;
57	startTime = undefined;
58	document.getElementById('sec').innerHTML = '0.00';
59}
60
61function clickRun(){
62	$('#run').css('display','none');
63	$('#stop').show();
64	$('#reset').show();
65}
66function clickstop(){
67	$('#run').show();
68	$('#stop').css('display','none');
69}
70function clickReset(){
71	$('#run').show();
72	$('#stop').css('display','none');
73	$('#reset').css('display','none');
74}
75});
76</script>

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっと作ってみました。
http://jsdo.it/utun001/lTD7

※ jQuery使ってます。

lang
1<div id="sw1">
2    <button class="startBtn">start</button>
3    <button class="stopBtn">stop</button>
4    <button class="resetBtn">reset</button>
5    <div class="timerText">0</div>
6</div>
7<div id="sw2">
8    <button class="startBtn">start</button>
9    <button class="stopBtn">stop</button>
10    <button class="resetBtn">reset</button>
11    <div class="timerText">0</div>
12</div>
13<div id="sw3">
14    <button class="startBtn">start</button>
15    <button class="stopBtn">stop</button>
16    <button class="resetBtn">reset</button>
17    <div class="timerText">0</div>
18</div>

lang
1//クラス作成＆コンストラクタ
2var StopWatch = function(_continerId){
3    var self = this;
4    this.continerSelecter = '#'+_continerId;
5    this.startBtnSelecter = '.startBtn';
6    this.stopBtnSelecter = '.stopBtn';
7    this.resetBtnSelecter = '.resetBtn';
8    this.timerTextSelecter = '.timerText';
9    this.defaultInterval = 1000;
10    this.timerId = null;
11
12    
13    // クリックイベント登録
14    $(this.continerSelecter+'>'+this.startBtnSelecter).click(function(){
15        self.start();
16    });
17    $(this.continerSelecter+'>'+this.stopBtnSelecter).click(function(){
18        self.stop();
19    });
20    $(this.continerSelecter+'>'+this.resetBtnSelecter).click(function(){
21        self.reset();
22    });
23};
24//各function
25StopWatch.prototype.start = function(){
26    this.run();
27};
28StopWatch.prototype.stop = function(){
29    if(this.timerId !== null){
30        clearInterval(this.timerId);
31    }
32};
33StopWatch.prototype.reset = function(){
34    $(this.continerSelecter+'>'+this.timerTextSelecter).text('0');
35};
36StopWatch.prototype.run = function(){
37    var self = this;
38    this.timerId = setInterval(function(){
39        var num = $(self.continerSelecter+'>'+self.timerTextSelecter).text();
40        $(self.continerSelecter+'>'+self.timerTextSelecter).text(parseInt(num,10)+1);
41    }, this.defaultInterval);
42};
43
44// main処理
45$(document).ready(function(){
46    var sw1 = new StopWatch('sw1');
47    var sw2 = new StopWatch('sw2');
48    var sw3 = new StopWatch('sw3');
49});