QML: Make multiple custom controls independent

Stefanoxjx

Hi guys,
it's always me!!!
Please, have some patience because I'm studying QML and obviously I encounter some difficulty that I can't solve myself.

I've a custom control (see below) and this control is istantiated more times (2 in my case).
It would be possible to do that any instance is changed independently?

Now, when I press the button Increment/Decrement, all instance are updated a the same time with the same value.

I tried with property alias in many format, but I can't solve my problem and I think that is very bad create multiple custom controls with same code.
I hope to had explain good.

Thanks.

import QtQuick 2.15
import QtQuick.Window 2.15

Item {
    readonly property int itemSpacing: 10
    property int side
    //property alias temperature: tempText.text

    Connections {
        target: temperatureControl
        function onUpdateTemperature(temp)
        {
            console.log(temp)
            temperature = temp;
        }
    }

    id: tempSelector

    anchors {
        top: parent.top
        bottom: parent.bottom
    }

    height: parent.height
    width: tempDown.width+tempText.width+tempUp.width+(itemSpacing*2)

    Image {
        id: tempDown

        anchors {
            left: parent.left
            verticalCenter: parent.verticalCenter
        }

        height: parent.height / 6
        fillMode: Image.PreserveAspectFit
        source: "qrc:/Images/ButtonDec.png"

        MouseArea {
            anchors {
                fill: parent
                topMargin: -10
                bottomMargin: -10
                leftMargin: -10
                rightMargin: -10
            }

            onClicked: {temperatureControl.temperatureSet(side, -1);}
        }
    }

    Text {
        id: tempText

        anchors {
            verticalCenter: parent.verticalCenter
            left: tempDown.right
            leftMargin: itemSpacing
        }

        font.pixelSize: 35
        color: "white"
        //text: "20.0"
    }

    Image {
        id: tempUp

        anchors {
            verticalCenter: parent.verticalCenter
            left: tempText.right
            leftMargin: itemSpacing
        }

        height: parent.height / 6
        fillMode: Image.PreserveAspectFit
        source: "qrc:/Images/ButtonInc.png"

        MouseArea {
            anchors{
                fill: parent
                topMargin: -10
                bottomMargin: -10
                leftMargin: -10
                rightMargin: -10
            }
            onClicked: {temperatureControl.temperatureSet(side, 1);}
        }
    }
}