forked: 艦これ　ウィークリー任務カウンター

jsdoit.css

.quest {
    position:relative;
    margin:10px ;
}

.content {
}

.title {
    font-size:16px;
    margin:0 0 10px;
    line-height:1;
}

/*.detail {
    display: -webkit-flex;
    -webkit-justify-content:space-between;
    -webkit-align-items:flex-start;
    -webkit-flex-flow: row;
}*/

.description, .reward {
    font-size:12px;
    margin:0 0 5px;
    word-break:break-word;
}

.reward{
    display:inline-block;
    padding:0 5px;
    position:absolute;
    right:5px;
    top:5px;
}

form {
    margin:0;
}
.cat {
   margin-right:5px
}

.counter {
}

.counter .add-on {
    font-size:12px
}

.control-group.pull-left {
    margin-right:20px
}

/*.btn.plus,
.btn.minus{
    display:none;
}*/

.btn.reset{
    /*visibility:hidden*/
}


@media (max-width:320px) {
    body {
        padding:0;
    }
    .reward {
        position:static;
    }
    .control-group.pull-left {
        float:none
    }
    .btn.plus,
    .btn.minus {
        display:inline-block;
    }
    .input-mini {
        width:60px !important;
    }
}

jsdoit.html

<article>
    
<section id="S-01" class="quest well well-small">
    <h1 class="title"><b class="cat label label-important">出撃</b>海上通商破壊作戦</h1>
    <div class="detail">
        <p class="description">1週間で敵輸送船を20隻以上撃沈せよ！<br>
          <span class="muted">「敵艦隊主力を撃滅せよ！」（デイリー）達成後に発生</span></p>
        <p class="reward  alert  alert-success">500/-/400/-/開発資材x3</p>
    </div>
    <form class="counter">
        <div class="control-group input-prepend input-append pull-left">
            <label for="S-01-01" class="add-on">敵輸送船</label>
            <input id="S-01-01" type="number" min="0" max="20" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="S-01-01">+</button>
            <button type="button" class="btn minus" data-id="S-01-01">-</button>
            <span class="add-on">撃沈</span>
        </div>
        <button type="button" class="btn btn-danger reset">リセット</button>
    </form>
</section>

<section id="S-02" class="quest well well-small">
    <h1 class="title"><b class="cat label label-important">出撃</b>あ号作戦</h1>
    <div class="detail">
        <p class="description">1週間の全力出撃を行い、可能な限り多くの敵艦隊を捕捉、これを迎撃せよ！<br>
          <span class="muted">「海上通商破壊」と同時発生。<br>
              出撃36回、ボス到達24回、ボス勝利12回、完全S勝利6回を満たしたら達成</span></p>
        <p class="reward  alert  alert-success">500/-/400/-/開発資材x3</p>
    </div>
    <form class="counter">
        <div class="control-group input-prepend input-append pull-left" style="margin-right:10px">
            <label for="S-02-01" class="add-on">出撃</label>
            <input id="S-02-01" type="number" min="0" max="36" value="0" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="S-02-01">+</button>
            <button type="button" class="btn minus" data-id="S-02-01">-</button>
            <span class="add-on">回</span>
        </div>
        <div class="control-group input-prepend input-append">
            <label for="S-02-02" class="add-on">ボス到達</label>
            <input id="S-02-02" type="number" min="0" max="24" value="0" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="S-02-02">+</button>
            <button type="button" class="btn minus" data-id="S-02-02">-</button>
            <span class="add-on">回</span>
        </div>
        <div class="control-group input-prepend input-append pull-left" style="margin-right:10px">
            <label for="S-02-03" class="add-on">ボス勝利</label>
            <input id="S-02-03" type="number" min="0" max="12" value="0" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="S-02-03">+</button>
            <button type="button" class="btn minus" data-id="S-02-03">-</button>
            <span class="add-on">回</span>
        </div>
        <div class="control-group input-prepend input-append">
            <label for="S-02-04" class="add-on">完全S勝利</label>
            <input id="S-02-04" type="number" min="0" max="6" value="0" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="S-02-04">+</button>
            <button type="button" class="btn minus" data-id="S-02-04">-</button>
            <span class="add-on">回</span>
        </div>
        <button type="button" class="btn btn-danger reset">リセット</button>
    </form>
</section>

<section id="S-03" class="quest well well-small">
    <h1 class="title"><b class="cat label label-important">出撃</b>い号作戦</h1>
    <div class="detail">
        <p class="description">有力な母艦航空隊で1週間の全力出撃を行い、可能な限り多くの敵空母を撃滅せよ！<br>
            <span class="muted">「補給艦3隻」達成で発生。<br>敵・味方とも軽空母可。敵空母20隻撃沈で達成 <br>
            今のところ空母を編成に入れてなくても達成する（設定ミス？）</span></p>
        <p class="reward  alert  alert-success">-/500/-/500/開発資材x2</p>
    </div>
    <form class="counter">
        <div class="control-group input-prepend input-append pull-left">
            <label for="S-03-01" class="add-on">敵空母</label>
            <input id="S-03-01" type="number" min="0" max="20" value="0" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="S-03-01">+</button>
            <button type="button" class="btn minus" data-id="S-03-01">-</button>
            <span class="add-on">撃沈</span>
        </div>
        <button type="button" class="btn btn-danger reset">リセット</button>
    </form>
</section>

<section id="S-04" class="quest well well-small">
    <h1 class="title"><b class="cat label label-important">出撃</b>敵輸送船団を叩け！</h1>
    <div class="detail">
        <p class="description">敵の輸送船5隻以上を撃沈し、敵の補給路を寸断せよ！<br>
            <span class="muted">あ号、い号達成済みで「敵艦隊撃破せよ」達成後に発生</span></p>
        <p class="reward  alert  alert-success">-/200/-/-/開発資材x2</p>
    </div>
    <form class="counter">
        <div class="control-group input-prepend input-append pull-left">
            <label for="S-04-01" class="add-on">敵輸送船</label>
            <input id="S-04-01" type="number" min="0" max="5" value="0" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="S-04-01">+</button>
            <button type="button" class="btn minus" data-id="S-04-01">-</button>
            <span class="add-on">撃沈</span>
        </div>
        <button type="button" class="btn btn-danger reset">リセット</button>
    </form>
</section>

<section id="S-05" class="quest well well-small">
    <h1 class="title"><b class="cat label label-important">出撃</b>ろ号作戦</h1>
    <div class="detail">
        <p class="description">1週間の全力出撃を行い、敵輸送船団を捕捉・撃滅、敵の補給路を寸断せよ！<br>
            <span class="muted">あ号達成で発生。補給艦50隻撃破で達成</span></p>
        <p class="reward  alert  alert-success">400/-/800/-/高速修復材x3</p>
    </div>
    <form class="counter">
        <div class="control-group input-prepend input-append pull-left">
            <label for="S-05-01" class="add-on">敵補給艦</label>
            <input id="S-05-01" type="number" min="0" max="50" value="0" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="S-05-01">+</button>
            <button type="button" class="btn minus" data-id="S-05-01">-</button>
            <span class="add-on">撃沈</span>
        </div>
        <button type="button" class="btn btn-danger reset">リセット</button>
    </form>
</section>

<section id="S-06" class="quest well well-small">
    <h1 class="title"><b class="cat label label-important">出撃</b>海上護衛戦</h1>
    <div class="detail">
        <p class="description">有力な対潜能力を持つ海上護衛隊によって、可能な限り多くの敵潜水艦を撃滅せよ！<br>
            <span class="muted">潜水艦15隻程度</span></p>
        <p class="reward  alert  alert-success">600/-/-/-/高速修復材x2</p>
    </div>
    <form class="counter">
        <div class="control-group input-prepend input-append pull-left">
            <label for="S-06-01" class="add-on">敵潜水艦</label>
            <input id="S-06-01" type="number" min="0" max="15" value="0" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="S-06-01">+</button>
            <button type="button" class="btn minus" data-id="S-06-01">-</button>
            <span class="add-on">撃沈</span>
        </div>
        <button type="button" class="btn btn-danger reset">リセット</button>
    </form>
</section>

<section id="E-01" class="quest well well-small">
    <h1 class="title"><b class="cat label label-warning">演習</b>大規模演習</h1>
    <div class="detail">
        <p class="description">今週中に「演習」で他の提督の艦隊に対して20回「勝利」しよう！<br>
            <span class="muted">デイリーの演習クエをやるときにチェックしておく。</span></p>
        <p class="reward  alert  alert-success">200/200/200/200/開発資材x2</p>
    </div>
    <form class="counter">
        <div class="control-group input-prepend input-append pull-left">
            <label for="E-01-01" class="add-on">勝利</label>
            <input id="E-01-01" type="number" min="0" max="20" value="0" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="E-01-01">+</button>
            <button type="button" class="btn minus" data-id="E-01-01">-</button>
            <span class="add-on">回</span>
        </div>
        <button type="button" class="btn btn-danger reset">リセット</button>
    </form>
</section>

<section id="K-01" class="quest well well-small">
    <h1 class="title"><b class="cat label label-info">遠征</b>大規模遠征作戦、発令！</h1>
    <div class="detail">
        <p class="description">今週中に「遠征」30回成功させよう！<br>
            <span class="muted">デイリーの遠征と一緒にチェックしておく。<br>
                遠征中は外しても良いが、戻る前にチェックを入れないと達成出来ない。</span></p>
        <p class="reward  alert  alert-success">200/200/200/200/開発資材x2</p>
    </div>
    <form class="counter">
        <div class="control-group input-prepend input-append pull-left">
            <label for="K-01-01" class="add-on">遠征成功</label>
            <input id="K-01-01" type="number" min="0" max="30" value="0" step="1" class="input-mini">
            <button type="button" class="btn plus" data-id="K-01-01">+</button>
            <button type="button" class="btn minus" data-id="K-01-01">-</button>
            <span class="add-on">回</span>
        </div>
        <button type="button" class="btn btn-danger reset">リセット</button>
    </form>
</section>
</article>

jsdoit.js

// forked from Tenderfeel's "艦これ　ウィークリー任務カウンター" http://jsdo.it/Tenderfeel/74c1
$(function(){

    $('.counter').each(function(i, el){
        var $el = $(el);
        var $counterInput = $el.find('input[type=number]');
        
        $counterInput.each(function(j, counter) {
            $(counter).val(localStorage.getItem(counter.id) || 0)
                          .on('change', addCounter);
            checkClear($(counter));
        });
        
        $el.find('.btn.reset').on('click', function() {
            var id = $el.parent('.quest').attr('id');
            if (confirm('リセットしますか？') ) {
                el.reset();
                for (var i = $counterInput.length; i--; ) {
                    localStorage.removeItem(id + '-0' + (i +1));
                    $($counterInput[i]).attr('disabled', false).val(0);
                }
            }
            
        });
        
        $el.find('.btn.plus').on('click', function() {
            var id = $(this).attr('data-id');
            var $el = $('#' + id);
            var val = parseFloat($el.val());
            var max = $el.attr('max');
            if (!checkClear($el)) {
                $el.val(val + 1);
            }
        });
        $el.find('.btn.minus').on('click', function() {
            var id = $(this).attr('data-id');
            var $el = $('#' + id);
            var val = parseFloat($el.val());
            var min = $el.attr('min');
            if (min < val ) {
                $el.val(val - 1);
            }
        });
    });
    
    function addCounter() {
        var $this = $(this);
        var val = $this.val();
        localStorage.setItem($this.attr('id'), val);
        checkClear($this);
    }
    
    function checkClear($this) {
        if ($this.attr('max') === $this.val()) {
            $this.attr('disabled', true);
            return true;
        }
        return false;
    }
});