Phaser 3 game shirt on the top, pants at the back

so I am creating a game using Phaser 3, with a little treat at the end which is to allow people to customize the characters by selecting the outfits that they want. I am able to finish up the customizing, but now I was wondering if it is possible to have the shirt to always be at the top layer, and the pants to be behind the shirt. You are able to select the shirt or pants first, but whatever is selected second would overlap the first like the image below

I would like for it to be the shirt to always be on top, and the pants to always be below, regardless of whether you select the shirt first or the pants first, like the image below

The code below is the code for when the character has any piece of clothing on. Do help me out if possible I would really appreciate it.

tabs.getElement("panel").on(
      "cell.down",
      function (cellContainer, cellIndex, pointer) {
      console.log(playercoin);
        const name = filter.toLowerCase() + "Image" + cellIndex;
        localStorage.setItem("wa", name);
        let itemToRemove;
        for (let i = 0; i < playerContainer.length; i++) {
          const containerItem = playerContainer.list[i];
          if (containerItem.data.get("name") === filter.toLowerCase()) {
            itemToRemove = containerItem;
            itemToRemove.cost = containerItem.data.get("cost");
            break;
          }
        }
        const costUrl = cellContainer.data.get("costUrl");
        const newCost = GetCostFromUrl(costUrl);