How do I keep my data in sync with the scene graph?

I have a list where I add/remove elements:

let list = [];
list.push(1);
list.push(2);
list.shift();

Or this could be a map as well:

let res = {};
res['key'] = 3;
res['key2'] = 5;
delete res['key'];

Now I want to render this list/map. I use Pixi.js where there is a scene graph for objects.

So I have some functions to setup and render this scene:

let dS = new Sprite();
addToScene();

function addToScene() {
    // add a sprite to the scene
  scene.addChild(dS);
}

// called once on setup
function init() {
  dS.texture = textures['smile'];
}


// called everytime on render
function render() {
    dS.position.set(x, y);
}

As you can see there is the step of creating sprites, adding the sprites to the scene, initializing with textures, and setting their position on each render time. Now this would be easy if I knew the sprites were static. But as I mentioned above I have a list where I add/remove elements. How do I initialize these sprites associated with each list item, and render them, and add/remove them as they are added/removed from the list.