You need to implement a proper closure on your click handler.
Let me point you in the right direction:
// (This is untested, but should be pretty close to what you need)
for(var x = 0; x < TabContainer.length ; x++){
Tab = TabContainer[x];
$('body').append(Tab.TitleBoxContainer);
$(Tab.TitleBoxContainer).on('click', myClosure(Tab)); // Calling the closure
}
function myClosure(Tab) { // Binding the current value of the Tab to the function it
return function() // and returning the function
if(Tab.SelectedBox == 1){
Tab.UnSelectTab();
Tab.SelectedBox = 0;
}else{
Tab.SelectTab();
Tab.SelectedBox = 1;
}
Tab.RemoveStyle();
});
}
Another way to write the closure would be:
for(var x = 0; x < TabContainer.length ; x++){
Tab = TabContainer[x];
$('body').append(Tab.TitleBoxContainer);
$(Tab.TitleBoxContainer).on('click', function(theRealTab) { // Creating closure
return function(){
if(theRealTab.SelectedBox == 1){
theRealTab.UnSelectTab();
theRealTab.SelectedBox = 0;
}else{
theRealTab.SelectTab();
theRealTab.SelectedBox = 1;
}
theRealTab.RemoveStyle();
}
})(Tab); // Binding the current value of Tab to the function variable theRealTab
}
Without the closure, the Tab variable in your click functions will always be the current value of the variable (in this example - the last Tab processed if your for loop).
For more info:
Closures inside loops - The accepted answer has an example very similar to this