I am programming a room, with different lightbulbs. The bulbs should be turned off or on individually. I should be possible to add an id on the change function. I have created the bulbs on the 'server' where I have access to the images and define the position.

All he different bulbs get their position in the new bulb, the Javascript should turn them on or off.

```

    private final Bulb[] bulbs = new Bulb[]{
            new Bulb(1, true, "white", "slaapkamer", 92, 31),
            new Bulb(2, false, "soft", "slaapkamer", 374, 31),
            new Bulb(3, true, "blue", "trap", 493, 325),
            new Bulb(4, false, "clear", "keuken", 832, 49),
            new Bulb(5, false, "soft white", "wc", 1109, 37),
            new Bulb(6, false, "normal", "douche", 1212, 251),
            new Bulb(7, true, "onmove", "outside", 606, -71),
    };

function change() {
    var image = document.getElementById('switch');
    var lightBulb = setBulbStatus(1, function(lightBulb) {

    document.getElementById("demo").onclick = function() {myFunction()};

        if (lightBulb.on) {
            image.src ='img/bulb-on.png';
        }
        else {
            image.src ='img/bulb-off.png';
            }

        });
}

function setBulbStatus(bulbId, okCode){
    let url = new URL("/setBulb", document.baseURI);
    url.searchParams.append("bulbId", bulbId);
    console.log("Before fetch")

    fetch(url)
        .then(response => {
            return response.json();
        })
        .then((data) => {
            console.log("Before fetch")
            console.log(data)
            okCode(data);
        },
            (error) => {
                console.error(error);
            });
    console.log("After fetch")
}

function positionBulbs(){
    let floorPlan = $("#floorplanContainer")
    let lightbulbOff = "img/bulb-off.png";
    let lightbulbOn = "img/bulb-on.png";

    fetchBulbs(function(bulbs){
        bulbs.forEach(function(bulb){
            let lightBulbSrc = bulb.on ? lightbulbOn : lightbulbOff;
            let img = $("<img>");
            img.attr("id", bulb.id)
            img.attr("src", lightBulbSrc)
            img.css({top: bulb.yPosition, left: bulb.xPosition, position:'absolute', height: 65, width: 65});
            floorPlan.append(img);
        });
    });
}

function fetchBulbs(okCode){
    let url = new URL("/bulbs", document.baseURI);

    fetch(url)
        .then(response => {
            return response.json();
        })
        .then((data) => {
            okCode(data);
        },
            (error) => {
                console.log(error);
            });
}

$( document ).ready(function() {
    positionBulbs();
});

function fetchBulbs(okCode){
    let url = new URL("/bulbs", document.baseURI);

    fetch(url)
        .then(response => {
            return response.json();
        })
        .then((data) => {
            okCode(data);
        },
            (error) => {
                console.log(error);
            });
}

```