javascript - jqueryを使用してタブクリックするとテキストボックスが1つずつ表示されない

Question

こんにちは、タブを押すとテキストボックスを 1 つずつ表示したいと思います。

最初に1つのテキストボックスを表示する必要があり、次にタブを押すと2番目のテキストボックスがフォーカスされて表示され、次に3番目と4番目が同じプロセスで表示されます。

テキストボックスを表示することはできますが、テキストボックスの代わりにタブを押すと最初のテキストボックスの後、すべてのテキストボックスが表示されます。

これが私のコードです：

     function showstep2() {

        document.getElementById('step2').style.visibility = 'visible'
       document.getElementById('newOrdQuan').focus();


   }


   function showstep3() {

       document.getElementById('step3').style.visibility = 'visible';
       document.getElementById('takeOutAmt').focus();
   }
    function showstep4() {
        document.getElementById('step4').style.visibility = 'visible';
        document.getElementById('compsPerWeek').focus();
    }




<table style="width: 270px; border: 2px navy solid;">
<tbody>
<tr>
<td><form name="form1">
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>

<table id="step2"  style="width: 100%;  visibility: hidden;"  align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td>
<input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>

</tbody>
</table>

<table id="step4" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Many Times a Week do You Comp an Order? (5% expected)</td>
<td><input tabindex="4" type="text" name="compsPerWeek" id="compsPerWeek" size="6" value="1" onblur="doCalc(); showstep5();" /></td>
</tr>
</tbody>
</table>