jquery switch case и after (anything) stuck

Question

Я сделал программу, которая отображает/скрывает кнопки, зависит от того, что вы нажали. Это просто, но у меня большая проблема. Я не буду позиционировать эти кнопки иерархически, первый раз, когда я попытался добавить тег «
», но если я использую .after(), этот элемент не может быть убит. Зачем?

<button id="vissza">Vissza</button><hr /> <!-- vissza means: BACK --> 
<button id="1">First</button> 
<button id="11">AA</button> 
<button id="111">AA1</button> 
<button id="112">AA2</button> 
<button id="113">AA3</button> 
<button id="114">AA4</button> 
<button id="12">AB</button> 
<button id="121">AB1</button> 
<button id="122">AB2</button> 
<button id="123">AB3</button> 
<button id="124">AB4</button> 
<button id="125">AB5</button> 

<button id="2">Second</button> 
<button id="21">BA</button> 
<button id="211">BA1</button> 
<button id="212">BA2</button> 
<button id="213">BA3</button> 
<button id="214">BA4</button> 
<button id="22">BB</button> 
<button id="221">BB1</button> 
<button id="222">BB2</button> 
<button id="223">BB</button> 

<button id="3">Third</button> 
<button id="31">CA</button> 
<button id="32">CB</button> 
<button id="33">CC</button> 
<button id="34">CD</button> 

<script> 

$("button[id]").hide(); 
$("button[id='1']").show(); 
$("button[id='2']").show(); 
$("button[id='3']").show(); 

$("button").click(function (event) { 
event.preventDefault(); 
var CurrentButtonID = $(this).attr('id'); 

LengthOfAButton = CurrentButtonID.length; 
j = 1; 

var ItIsExist = 1; 

switch (LengthOfAButton) { 
case 1: 
$("button[id]").hide(); 
BeforeStep = CurrentButtonID; 

while (ItIsExist>0) { 
ShowThis = "button[id=" + CurrentButtonID + j + "]"; 
$(ShowThis).show().after('[can not dissappear1]'); 
ItIsExist = $(ShowThis).length; 
j++; 
} 

break; 

case 2: 
$("button[id]").hide(); 
BeforeStep = CurrentButtonID; 

while (ItIsExist>0) { 
ShowThis = "button[id=" + CurrentButtonID + j + "]"; 
$(ShowThis).show().after('[can not dissappear2]'); 
ItIsExist = $(ShowThis).length; 
j++; 
} 

break; 

case 3: 
$("button[id]").hide(); 
BeforeStep = CurrentButtonID; 

while (ItIsExist>0) { 
ShowThis = "button[id=" + CurrentButtonID + j + "]"; 
$(ShowThis).show().after('[can not dissappear3]'); 
ItIsExist = $(ShowThis).length; 
j++; 
} 
break; 

case 6: 

if (BeforeStep.length==1) { 
$("button[id]").hide(); 
CurrentButtonID = BeforeStep.substr(0,0); 
} 
if (BeforeStep.length==2) { 
$("button[id]").hide(); 
CurrentButtonID = BeforeStep.substr(0,1); 
} 
if (BeforeStep.length==3) { 
CurrentButtonID = BeforeStep.substr(0,2); 
$("button[id]").hide(); 
} 
if ((BeforeStep.length>1) && (BeforeStep.length<6)) { 
$("button[id]").hide(); 
} 

while (ItIsExist>0) { 
var ShowThis = "button[id=" + CurrentButtonID + j + "]"; 
$(ShowThis).show().after('[can not dissappear /at backbutton/]'); 
ItIsExist = $(ShowThis).length; 
j++; 
} 
BeforeStep = CurrentButtonID; 
break; 
} 

$("button[id='vissza']").show(); 

}); 


</script> 

Answer 1

Попробуйте

var btns = $("button[id]").hide(); 
$("#1, #2, #3").show(); 

btns.click(function(e){ 
    var $this = $(this); 
    var regex = new RegExp('^' + $this.attr('id') + '\\d$'); 
    btns.filter(function(i, v){ 
     return regex.test(this.id); 
    }).show(); 
}); 

Demo: Fiddle