Question

How to when click “Create” button add last state of object to array and create new clean ready to continue, and if click “Continue” button modyfy only actual object, now is modified all objects in sections array?

Illustrative materials:

HTML:

<button onclick="create()">Create</button>
<button onclick="add()">Continue</button>

​
JavaScript:

var sections = [];

create = function() {
    sections.push(section);

    section.array = [];
    section.c = 0;

    section.add();

    $("body").append("<br>Add to array at moment last state of object and make new one<br>" + JSON.stringify(sections) + "<br >");
}

add = function() {
    section.add();

    $("body").append("<br>continue only this object<br>" + JSON.stringify(sections) + "<br >");
}

var section = {
    array: [],
    c: 0,
    add: function() {
        section.c++;
        section.array.push(section.c);
    }
}​

Answer 1

You will need to create new section objects, instead of resetting the properties of your one section variable (in your create function):

var sections = [],
section = makeSection();

function create() {
    sections.push(section); // add the current section
    section = makeSection(); // make a new one
    section.add();

    $("body").append("<br>Add to array at moment last state of object and make new one<br>" + JSON.stringify(sections) + "<br >");
}

function add() {
    section.add();
    $("body").append("<br>continue only this object<br>" + JSON.stringify(sections) + "<br >");
}

function makeSection() {
    return {
        array: [],
        c: 0,
        add: function() {
            section.c++;
            section.array.push(section.c);
        }
    }​;
}

Yet, I’d say this is a case for a constructor function:

function Section() {
    this.array = [];
    this.c = 0;
    // maybe do this automatically on constructing:
    // this.add();
    // sections.push(this);
}
Section.prototype.add = function() {
    this.c++;
    this.array.push(section.c);
}

and then use new Section() instead of makeSection().