var _$body = $('body');

var triggerClassAdd = '.js-trigger--add-occupation';
var triggerClassRemove = '.js-trigger--remove-occupation';
var appendContainer = '.js-append--occupation';
var occupation = '.js--occupation';

var _$appendContainer = $(appendContainer);

var _clonedOccupation,_inputs,_htmlOccupation;

var appendOccupation = function () {
    var _htmlString = _htmlOccupation;
    var _key = createRandomKey();

    $.each(_inputs,function (i) {
        var _input = _inputs[i].outerHTML;
        var _inputValue = _inputs[i].value;
        var _newInput = _input.replace('[0]','['+_key+']').replace('value="'+_inputValue+'"','value=""');

        _htmlString = _htmlString.replace(_input,_newInput);
    });

    _$appendContainer.append(_htmlString);

    $('.selection.input--select').dropdown();

};

var removeOccupation = function () {
   $(this).parent().remove();
};

var createRandomKey = function () {
    var key = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < 10; i++)
        key += possible.charAt(Math.floor(Math.random() * possible.length));

    return key;
};

if (_$appendContainer.length > 0) {
    var _$occupations = $(occupation);
    if (_$occupations.length > 0) {
        _clonedOccupation = _$occupations.first().get(0);
        _inputs = $(_clonedOccupation).find('input');
        _htmlOccupation = '<div class="row franchise_application_form__row js--occupation"><span class="h4 franchise_application_form__remove-occupation js-trigger--remove-occupation"><i class="icon-remove_occupation"></i></span>' + $(_clonedOccupation).html() + '</div>';
        _htmlOccupation = _htmlOccupation.replace('input--error','');
        _htmlOccupation = _htmlOccupation.replace('<span class="error"></span>','');

        _$body.on('click',triggerClassAdd,appendOccupation);
        _$body.on('click',triggerClassRemove,removeOccupation);
    }
}