​

​

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js"></script>

​

​

    <script type="text/javascript">

    $(document).ready(function() {

        $('.edit').editable('http://save.php', {

            indicator : 'Saving...',

            tooltip   : 'Click to edit...',

            submit    : 'OK',

            cancel : 'Cancelar',

        });

    });

    $(document).ready(function () {

       $('#btnAdd').live('click', function(){

            var num = $('.clonedInput').length;

            var newNum = new Number(num + 1);

            var newElem = $('#input' + num).clone(true).prop('id', 'input' + newNum);

            newElem.children(':text').prop('name', "myformdata[job][]").prop('job', 'job').val('');

            $('#input' + num).after(newElem);

            $('#btnDel').prop('disabled', '');

            if (newNum == 4) $('#btnAdd').prop('disabled', 'disabled');

        });

        $('#btnDel').live('click', function(){

            var num = $('.clonedInput').length;

            $('#input' + num).remove();

            $('#btnAdd').prop('disabled', '');

            if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');

        });

        $('#btnDel').prop('disabled', 'disabled');

    });

    </script>

        <div class="clonedInput" id="input1">

            <span style="float: left;">job</span>

            <div class="edit" id="job="myformdata[job][]">Job</div>

        </div>

        <div id="copy">

            <input class="format" type="button" id="btnAdd" value="Adicionar" />

            <input class="format" type="button" id="btnDel" value="Remover" />

        </div>