$(document).ready(function () {
    //add and remove vehicle fields
    //APPEND ADDED TEXTAREAS
    var addButton = $('#add-field'); //Add button selector
    var wrapper = $('.added-fields'); //Input field wrapper

    var x = 1;
    var fieldHTML = '<div class="">' +
        '<button type="button" id="remove-button"> <i class="fa fa-trash"></i> </button>' +
        '<div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Clause Title:  <span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input type="text" name="title[]" size="15" class="input-text-height">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Preference No.: <span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input name="pref-no[]" type="number"  style="width: 70px" class="input-text-height">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Enter Clause Details.: <span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <textarea class="textarea" name="detail[]" style="min-width: 820px; min-height: 150px"></textarea>\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_inputDivider input_divider1"></div>';

    //Once add button is clicked
    $(addButton).click(function(){
        x++; //Increment field counter

        $(wrapper).append(fieldHTML); //Add field html
    });
    //Once remove button is clicked
    $(wrapper).on('click', '#remove-button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
