Jquery on-click; ajax, works but not exactly as intended

Question

I thought of doing a fiddle for this, but since it's already online, and since I don't know fiddle that well, I figured it'd take me a long time to get it right on one. So...

The code's all there. And you can all see what the problem is...

The problem: I need it to remain that when one clicks the OIL, MILITARY, MISC tabs, the first rectangle border is red (as it is when you first scroll through them now). When one clicks the second, third, etc. rectangle on the oil tab, the border needs to be removed from the one that it currently is on and be applied to the one that was just clicked. Again, keeping the first rectangle on the MILITARY and MISC tabs as selected with a red border.

The code works, almost exactly as needed, but after spending a few hours trying to google and after rewriting the code several times (you can see some of my attempts commented out in the code), I cannot figure out what is wrong.

When you load the page, the TEST rectangle is selected. When you TEST 2 (or any other one) the red border is removed from TEST and applied to TEST 2 (or whichever one is clicked). When clicking any other, the red border remains and is added to the new one...but when TEST is reclicked (and gains the border again), and is then clicked out of (say, you click TEST 2 again), the border is removed once more...but it only works on TEST.

My question is thusly: what am I doing wrong? Why does it appear as though

var active_tab_selector2 = $('a[href='+active_div_data+']');
$(active_tab_selector2).parent('div').removeClass('selected');

is cached and not being re-ran on every click?

EDIT: (More code):

$("#lewy section div a").click(function(e) {
    e.preventDefault();

    var target_tab_selector2 = $(this).attr('href');

    var active_div = $("#lewy div div.active a");
    var active_div_data = $("#lewy div div.active a").data('default');

    var active_tab_selector2 = $('a[href='+active_div_data+']');
    $(active_tab_selector2).parent('div').removeClass('selected');
    $(active_div).attr('data-default',target_tab_selector2);

    var target = $('a[href='+target_tab_selector2+']');
    $(target).parent('div').addClass('selected');

    $.ajax({
       type    : "POST",
       cache   : false,
       url     : "mapStructureDisplay.php?s",
       data    : {'X': target_tab_selector2},
       success: function(data) {
        $("#secondary").html(data);
       }
      });

     });
  });

<div id="lewy" style="background-image:url('images/308.png');">
    <div id="outer">
    <div id="inner" class="active"><a href="#Div1" class="button" data-default="#str1">OIL</a></div>
    <div id="inner"><a href="#Div2" class="button" data-default="#str7">MILITARY</a></div>
    <div id="inner"><a href="#Div3" class="button" data-default="#str9">MISC</a></div>
    </div>
        <section id="Div1" class="active">
        <div id="structure" class="selected"><a class="button2" href="#str1">TEST</a></div>
        <div id="structure"><a class="button2" href="#str2">TEST 2</a></div>
        <div id="structure"><a class="button2" href="#str3">TEST 3</a></div>
        <div id="structure"><a class="button2" href="#str4">TEST 4</a></div>
        <div id="structure"><a class="button2" href="#str5">TEST 5</a></div>
        <div id="structure"><a class="button2" href="#str6">TEST 6</a></div>
        </section>
        <section id="Div2" class="hide">
        <div id="structure" class="selected"><a class="button2" href="#str7">TEST DIV 2</a></div>
        </section>
        <section id="Div3" class="hide">
        <div id="structure" class="selected"><a class="button2" href="#str9">TEST DIV 3</a></div>
        </section>
</div>
<div id="srodek">
&nbsp;
</div>
<div id="prawy" style="background-image:url('images/246.png');">
<div id="secondary">TEST</div>
</div>
</div>

Answer 1

Try changing:

$(active_div).attr('data-default',target_tab_selector2);

to:

$(active_div).data('default',target_tab_selector2);

jQuery caches data-XXX attribute the first time you access them with .data() , and doesn't fetch them again. So modifying them with .attr() later won't be seen when you use .data('default') to read the attribute. You should be consistent, either use .attr for all setting and reading, or .data , but don't mix them.