Find and show specific section dynamically with jQuery?

Question

I have a column with multiple instances of similar classes. Classes being refHeader1, refHeader2, refHeader3 and ref1select, ref2select, ref3select, and refScen1, refScen2, refScen3. Below, the numbers are being replaced by @{@i} to be driven dynamically. What I need is when clicking on (this) ref@{@i}select, the closest refScen@{@i} span is shown and all the rest of the refScen@{@i} spans are hidden. So far, I've tried the jQuery below with no luck. What am I doing wrong? In the console, I am just getting empty [ ] brackets when trying to find closest. Thanks in advance. http://jsbin.com/ezODiTAV/1/edit

jQuery

$("span[class*=select]").click(function () {
        // first hide all refScen spans
        $('span[class^=refScen]').hide();

        // show this refScen span
        //$(this).closest('span[class^=refScen]').show();
        //$(this).find().closest('span[class^=refScen]').show();
        //$(this).find().next('span[class^=refScen]').show();
});

HTML

<div class="col-md-12 padT nPadL nPadR" style="padding-bottom:10px">
    <span class='refHeader@{@i}'>
        <a href="#"><label>@item.Name</label></a>
        <div class="glyphicon glyphicon-chevron-down text-right ref@{@i}select"></div>
    </span>
</div>
<!-- /left options -->             
<span class='refScen@{@i}'>
        <div class="col-md-9 col-md-offset-3 padB nPadL nPadR">
            <a href="#">@listitem.Name</a>
        </div>
</span>

Answer 1

The problem is refScen** is not a ancestor of the ref@{@i}select element, it is the next sibling of one of its ancestor element

$("div[class*=select]").click(function () {
    $('span[class^="refScen"]').hide();
    $(this).closest('.col-md-12').next().show();
    //or $(this).parent().parent().next().show();
});

Demo: Fiddle

to make much simple why can't you add one more class to each of these elements without the number like

<div class="col-md-12 padT nPadL nPadR" style="padding-bottom:10px">
    <span class='refHeader@{@i} refHeaderrefHeader'>
        <a href="#"><label>@item.Name</label></a>
        <div class="glyphicon glyphicon-chevron-down text-right ref@{@i}select rfselect"></div>
    </span>
</div>
<!-- /left options -->             
<span class='refScen@{@i} refScen'>
        <div class="col-md-9 col-md-offset-3 padB nPadL nPadR">
            <a href="#">@listitem.Name</a>
        </div>
</span>

then

$(".rfselect").click(function () {
    $('.rfselect').hide();
    $(this).closest('.col-md-12').next().show();
    //or $(this).parent().parent().next().show();
});

Answer 2

you have miss some ' and " try this:

$("span[class*='select']").click(function () {
        // first hide all refScen spans
        $('span[class^="refScen"]').hide();

        $(this).closest('.col-md-12').next().show()
});