creating box each time without removing previous one

I have JS code that whenever it works it creates box. (Onload for now) I want to make it like whenever I call this function it will create new box without deleting previous one. Lets say whenever I click a button it will create again and again. How can I do that? So far I made the base code that onload it is working. I will put this script to the another script in if condition. So if the condition is true another box will be created without removing or reseting previous one. Here is the source code:

var Engine = Matter.Engine,
            Render = Matter.Render,
            World = Matter.World,
            Bodies = Matter.Bodies;
        var engine = Engine.create();
        var render = Render.create({
            element: document.body,
            engine: engine,
            options: {
                width: window.innerWidth,
                height: window.innerHeight,
                background: '#fff',
                showAngleIndicator: false,
                wireframes: false
            }
        });
        var x = Math.floor(Math.random() * 1000) + 400;
        var y= -100;

        var boxA = Bodies.rectangle(x, y, 60, 60, {
            friction: 0.1,
            restitution: 0.1,
            render: {
                sprite: {
                    texture: 'img/pink-box.png'
                }
            }
        })
        var boxB = Bodies.rectangle(x, y, 60, 60, {
            friction: 0.1,
            restitution: 0.1,
            render: {
                sprite: {
                    texture: 'img/orange-box.png'
                }
            }
        })
        var boxC = Bodies.rectangle(x, y, 60, 60, {
            friction: 0.1,
            restitution: 0.1,
            render: {
                sprite: {
                    texture: 'img/blue-box.png'
                }
            }
        })
        var boxD = Bodies.rectangle(x, y, 60, 60, {
            friction: 0.1,
            restitution: 0.1,
            render: {
                sprite: {
                    texture: 'img/lgreen-box.png'
                }
            }
        })
        var boxE = Bodies.rectangle(x, y, 60, 60, {
            friction: 0.1,
            restitution: 0.1,
            render: {
                sprite: {
                    texture: 'img/dorange-box.png'
                }
            }
        })
        var boxF = Bodies.rectangle(x, y, 60, 60, {
            friction: 0.1,
            restitution: 0.1,
            render: {
                sprite: {
                    texture: 'img/dgreen-box.png'
                }
            }
        })
        var boxG = Bodies.rectangle(x, y, 60, 60, {
            friction: 0.1,
            restitution: 0.1,
            render: {
                sprite: {
                    texture: 'img/dblue-box.png'
                }
            }
        })
        var groundColor = {
            fillStyle: 'white',
            strokeStyle: 'white',
            lineWidth: 0
        }


        var ground = Bodies.rectangle(window.innerWidth / 2, window.innerHeight
           + 50, window.innerWidth, 100, { isStatic: true, render: groundColor });

        var giftAr = [boxA, boxB, boxC, boxD, boxE, boxF, boxG];
        var giftNo = Math.floor(Math.random() * 6) + 0;

        var myworld = World.add(engine.world, [giftAr[giftNo], ground]);
        Engine.run(engine);
        Render.run(render);