javascript - クリックすると、次の TD テーブルが変更されます

Question

ボックスをクリックすると、次の列 1 のクロックが解除されるテーブルを作成したいと考えています。

私はこれを 2 つの tds で動作させましたが、動作しますが、複製すると動作しません。

クラスを持つTDがある場合（クリークできる）、Javaスクリプトを使用すると、そこをクリックして次のtdsまたは次の列クラスを変更して、前のようにクリックすることができ、そのクラスをクリックできないものなので、もう一度クリックすることはありません。

2 tds の私のコードは次のとおりです。

            <td>
                <div style="position: relative;" class="can-select1">
                    <img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
                    <div class="can-select-text">1</div>
                </div>
            </td>
            <td>
                <div style="position: relative;" class="nothing1">
                    <img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
                    <div class="can-select-text">2</div>
                </div>
            </td>

JS:

$('.can-select1').click(function(e){
    $(this).addClass("is-selected");
    $(this).find('.can-select').addClass("is-selected");
    $(this).children('.can-select-text').addClass("is-selected");
    var nextTd;
    nextTd=$(this).parent().find('.nothing1');
    nextTd.find('.nothing').addClass("can-select1");
    nextTd.addClass("can-select1");
    nextTd.removeClass('nothing1')
});

CSS:

.can-select1 {
    cursor:pointer;
    opacity:0.4;
}
.can-select-text{
    opacity: 0;
    position: absolute; 
    top: 0; 
    left: 0;
    text-align: center;
    width: 32px;
    font: bold 13px/32px 'Trebuchet Ms';
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); color: #111;
}
.is-selected {
    cursor:default;
    opacity:1.0;
}

.nothing1{
    cursor:default;
    opacity:0;
}

2 td の JSFIDDLE: http://jsfiddle.net/p3Q7Z/5/

テーブルの JSFiddle: http://jsfiddle.net/p3Q7Z/6/