Javascript-форум - Организация цикла

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Организация цикла (https://javascript.ru/forum/jquery/18625-organizaciya-cikla.html)

Организация цикла

При вводе имени, жмем "далее", форма ввода имени становится disabled, открывается форма ввода фамилии.
Жмем "переименовать" - откатываемся как бы на шаг назад, снова на ввод имени. Ввели имя, должны перейти далее. Вот тут-то и нужен цикл. Подскажите, пожалуйста, как правильно организовать?

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="Content-Language" content="ru" />

        <title></title>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

        $('#next').click(function(){

            $('#name input').attr('disabled', true);

            $('#famil input').attr('disabled', false);

            $('#next').html('переименовать');

            $(this).attr('id', 'rename');

            

                $('#rename').click(function(){

                    $('#name input').attr('disabled', false);

                    $('#famil input').attr('disabled', true);

                    $('#rename').html('далее');

                    $(this).attr('id', next);

                });

        });

        });

        </script>

</head>



<body>



<form action="">

    

<div id="name">

    <input type="text" value="имя" />

    <a href="#" id="next">далее</a>

</div>

<div id="famil">

    <input type="text" value="фамилия" disabled="disabled" />

    <a href="#">Отправить</a>

</div>



</form>



</body>

</html>

надо тогда делать ветвление по иду, СМ код

<form action="">
    
<div id="name">
    <input type="text" value="имя" />
    <a href="#" id="next">далее</a>
</div>
<div id="famil">
    <input type="text" value="фамилия" disabled="disabled" />
    <a href="#">Отправить</a>
</div>

</form>

<script src="http://yandex.st/jquery/1.6.2/jquery.min.js"></script>
<script>
	$(document).ready(function(){

        $('#name a').click(function(){

            *!*if( $(this).attr('id') === 'next' ) {*/!*

            $('#name input').attr('disabled', true);
            $('#famil input').attr('disabled', false);
            $('#next').html('переименовать');
            $(this).attr('id', 'rename');

           *!*} else {*/!*

                    $('#name input').attr('disabled', false);
                    $('#famil input').attr('disabled', true);
                    $('#rename').html('далее');
                    $(this).attr('id', 'next');

           *!*}*/!*

        });
	});
</script>

Отличное решение! Спасибо!