on div click show all divs with X id [closed]

Question

I want that when I click on one of the circle it shows the next row of circles. But can only have on with is-selected class. This is the code I have:

<table>
<tr>           
<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" id="tier1">
                            <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>
    </tr>
    <tr>           
<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" id="tier1">
                            <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>
    </tr>
    </table>

Javascript:

$('.can-select1').click(function(e){
    $(this).addClass("is-selected");
    $(this).find('.can-select').addClass("is-selected");
    $(this).children('.can-select-text').addClass("is-selected");
});

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;
}

JS fiddle: http://jsfiddle.net/p3Q7Z/7/

Answer 1

It's hard to tell what you actually want but this should help:

http://jsfiddle.net/p3Q7Z/8/

First, ids must be unique. I removed them.

Next, I added the line:

$(this).closest('td').next('td').find('.nothing1').removeClass('nothing1').addClass('can-select1');

This traverses from the button, up to the parent td, to the next sibling td, looks for its .nothing1 button, and makes it clickable.

Also, I changed the click handler line to:

$('table').on('click','.can-select1',function(e){

So the handler will apply when classes are added and removed. As you had it, the handler will only apply to the elements that existed when the page loaded for the first time.

---

edit

To modify all next td in the column:

$(this).closest('td').nextAll('td').each(function() {
    $(this).find('.nothing1').removeClass('nothing1').addClass('can-select1');
});

---

edit after chat, here's a re-write

http://jsfiddle.net/p3Q7Z/12

Use radio buttons and labels:

<td class="column-0 selectable">
    <input type="radio" name="column-0" id="column-0-row-0">
    <label for="column-0-row-0">
        <img src="http://lkimg.zamimg.com/images/guides/ability-marker.png">
        <div>1</div>
    </label>
</td>

Do all the styling in css without names:

td input[type="radio"] {
    display: none;
}
td input[type="radio"] + label {
    display:none;
    cursor:default;
    opacity:0;
    position: relative;
}
td input[type="radio"] + label img {
    vertical-align: middle;
}
td input[type="radio"] + label div {
    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;
}

td.selectable input[type="radio"] + label {
    display:block;
    cursor:pointer;
    opacity:0.4;
}
td.selectable input[type="radio"]:checked + label {
    cursor:pointer;
    opacity:1.0;
}