Updating a sessionStorage input and select fields

Question

when a user trys to update their already entered first name, last name or title options or all of the above. The updated fields are not displayed when the page is refreshed, can some one help me correct this problem?

Here is my Jsfiddle https://jsfiddle.net/6kqbhd0z/

And here is the code below.

Jquery the part I believe that is giving me the problem.

$('.add-more').on('click', '.update-helper', function(e){
    e.preventDefault();
    e.stopPropagation();

    var first_name = $(this).parent().parent().find('.first-name').val();
    var last_name = $(this).parent().parent().find('.last-name').val();
    var title = $(this).parent().parent().find('.helper-title').val();

    var key_values = {first_name: first_name, last_name: last_name, title: title};
    sessionStorage.helper = JSON.stringify(key_values); 
});

Jquery the full code

var helper_record = [];
$(document).ready(function(){
    if(typeof(Storage) !== 'undefined'){
        new_helper();
        $('.add-another').on('click', function(e){
            e.preventDefault();
            e.stopPropagation();

            if(sessionStorage.getItem('limit') === null){
                sessionStorage.setItem('limit', 0);
            }

            if(sessionStorage.getItem('limit') <= 19){
                var first_name = $('.first-name').val();
                var last_name = $('.last-name').val();
                var title = $('.title:first').val();            

                var key_values = {first_name: first_name, last_name: last_name, title: title};
                helper_record.push(key_values);

                sessionStorage.helper = JSON.stringify(helper_record);
                new_helper();

                var count = sessionStorage.getItem('limit');
                count++;
                sessionStorage.setItem('limit', count);  
            }
        });
    } else {
        var max_fields = 20;
        var x = 0;
        var index = 0;

        $('.add-another').on('click', function(e){
            e.preventDefault();
            e.stopPropagation();

            if(x < max_fields){
                x++;
                index++;
                var first_name = $('.first-name').val();
                var last_name = $('.last-name').val();
                var title = $('.title').val();

                var helper = '<div class="helper-container"><div class="helper-options" data-index="' + index + '"><a title="" href="#" class="delete-helper">Delete</a><a title="" href="#" class="update-helper">Update</a></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_first_name[]" class="first-name" value="' + first_name + '" /></label></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_last_name[]" class="last-name" value="' + last_name + '" /></label></div><div class="helper-box-last"><label class="another-helper"><select name="helpers_title[]" class="title helpers-title-options"><option value="Select a Title" selected="selected">Select a Title</option><option value="Manager">Manager</option><option value="Planner">Planner</option><option value="Advisor">Advisor</option><option value="Staff">Staff</option><option value="Laborer">Laborer</option></select></label></div></div>';

                $('.add-more').append(helper);
                $('.title:eq('+$('.helpers-title-options').length+')').val(title);
            }

            $('.first-name:first').val('');
            $('.last-name:first').val('');
            $('.title:first').val('Select a Title');
        });
    }

    function new_helper(){
        var max_fields = 20;
        var x = 0;
        var index = 0;

        if(!(typeof sessionStorage.helper === 'undefined' || sessionStorage.helper.length<1)){
            helper_record = JSON.parse(sessionStorage.helper);
        }

        $('.add-more').empty();
        for(var i=0; i<helper_record.length; i++){
            if(x < max_fields){
                x++;
                index++;
                var first_name = helper_record[i].first_name;
                var last_name = helper_record[i].last_name;
                var title = helper_record[i].title;

                var helper = '<div class="helper-container"><div class="helper-options" data-index="' + index + '"><a title="" href="#" class="delete-helper">Delete</a><a title="" href="#" class="update-helper">Update</a></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_first_name[]" class="first-name" value="' + first_name + '" /></label></div><div class="helper-box"><label class="another-helper"><input type="text" name="helpers_last_name[]" class="last-name" value="' + last_name + '" /></label></div><div class="helper-box-last"><label class="another-helper"><select name="helpers_title[]" class="title helpers-title-options"><option value="Select a Title" selected="selected">Select a Title</option><option value="Manager">Manager</option><option value="Planner">Planner</option><option value="Advisor">Advisor</option><option value="Staff">Staff</option><option value="Laborer">Laborer</option></select></label></div></div>';

                $('.add-more').append(helper);
                $('.title:eq('+$('.helpers-title-options').length+')').val(title);
            }
        }

        $('.first-name:first').val('');
        $('.last-name:first').val('');
        $('.title:first').val('Select a Title');
    }

    $('.add-more').on('click', '.delete-helper', function(e){
        e.preventDefault();
        e.stopPropagation();

        var index = $(this).parent().attr('data-index');
        $(this).parent().parent().remove();

        if(typeof(Storage) !== 'undefined'){
            var helper_limit = JSON.parse(sessionStorage.limit) -1;
            if(helper_limit >= 0){
                sessionStorage.setItem('limit', helper_limit);
            }

            if(helper_limit == 1){
                helper_record.splice(1, 0);
                sessionStorage.helper = JSON.stringify(helper_record);                  
            }

            helper_record.splice(index -1, 1);
            sessionStorage.helper = JSON.stringify(helper_record);
        } else {
            x--;
        }
    });

    $('.add-more').on('click', '.update-helper', function(e){
        e.preventDefault();
        e.stopPropagation();

        var first_name = $(this).parent().parent().find('.first-name').val();
        var last_name = $(this).parent().parent().find('.last-name').val();
        var title = $(this).parent().parent().find('.helper-title').val();

        var key_values = {first_name: first_name, last_name: last_name, title: title};
        sessionStorage.helper = JSON.stringify(key_values); 
    });
});

HTML

<div id="form-container">
    <form method="post" action="" id="form" enctype="multipart/form-data">
        <fieldset>
            <ol>
                <li>    
                    <div id="helper-headings">
                        <div class="helper-box">
                            <span>First Name:</span>
                        </div>
                        <div class="helper-box">
                            <span>Last Name:</span>
                        </div>
                        <div class="helper-box-last">
                            <span>Title:</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="helper-box">
                        <label class="helper"><input type="text" class="first-name" /></label>
                    </div>
                    <div class="helper-box">
                        <label class="helper"><input type="text" class="last-name" /></label>
                    </div>

                    <div class="helper-box-last">
                        <label class="helper"><select class="title">
                            <option value="Select a Title" selected="selected">Select a Title</option>
                            <option value="Manager">Manager</option>
                            <option value="Planner">Planner</option>
                            <option value="Advisor">Advisor</option>
                            <option value="Staff">Staff</option>
                            <option value="Laborer">Laborer</option>
                        </select></label>
                    </div>
                    <div class="question"><a class="add-another" title="" href="">Add Helper</a></div><div class="add-more"></div></li>
            </ol>
        </fieldset>
    </form>
</div>

Answer 1

When user click "update", I think that your code may have the following problems:

1. Title content of selected item is empty
2. update operation will change sessionStorage.helper from array to object.

The modified code is as follow:

$('.add-more').on('click', '.update-helper', function(e){
    e.preventDefault();
    e.stopPropagation();

    var first_name = $(this).parent().parent().find('.first-name').val();
    var last_name = $(this).parent().parent().find('.last-name').val();
    var title = $(this).parent().parent().find('.helpers-title-options').val();

    var index = $(this).parent().parent().prevAll().length;
    var key_values = {first_name: first_name, last_name: last_name, title: title};
    var help = JSON.parse(sessionStorage.helper);
    help[index] = key_values;
    sessionStorage.helper = JSON.stringify(help);
});

https://jsfiddle.net/sept08/8e446cL8/