Twine/Sugarcube2 clothing system

Authoring Twine
1

Hello. I’m pretty new to twine and sugarcube but still decided that I will try to make a game.
I figured most of stuff out through existent posts and/or youtube tutorials but I’m now stuck on this. I tried making equipment system as it was described in some old post and I got it to work (partially) however I cannot figure out how to change items player has if there are only certain slots. So I have head, top, bottom and feet slots.

Here is how I defined items in StoryInit passage. These are “placeholder” items just for the sake of displaying picture in the table even when player is wearing nothing.

<<set $head to []>>
<<set $top to []>>
<<set $bottom to []>>
<<set $feet to []>>

<<set $head.push({
	name: "Empty",
	type: "Head",
	image: "img/clothes/empty_head.jpg",
	unlocked: true,
	equipped: true,
	cost: 0
})>>
<<set $top.push({
	name: "Empty",
	type: "Top",
	image: "img/clothes/empty_top.jpg",
	unlocked: true,
	equipped: true,
	cost: 0
})>>
<<set $bottom.push({
	name: "Empty",
	type: "Bottom",
	image: "img/clothes/empty_legs.jpg",
	unlocked: true,
	equipped: true,
	cost: 0
})>>
<<set $feet.push({
	name: "Empty",
	type: "Feet",
	image: "img/clothes/empty_feet.jpg",
	unlocked: true,
	equipped: true,
	cost: 0
})>>

This part works but then I tried creating more clothing options the same way I made these items

<<set $head.push({
    name: "Red Wig",
    type: "Head",
    image: "img/clothes/toys/wig_red.jpg",
    unlocked: false,
    equipped: false,
    cost: 25
})>>
<<set $head.push({
    name: "Blue Wig",
    type: "Head",
    image: "img/clothes/toys/wig_blue.jpg",
    unlocked: false,
    equipped: false,
    cost: 25
})>>
<<set $head.push({
    name: "Brown Wig",
    type: "Head",
    image: "img/clothes/toys/wig_brown.jpg",
    unlocked: false,
    equipped: false,
    cost: 30
})>>

Here is how I display stuff

!CLOTHES
[[Your room]]
<table border = "4px">
	\<tr>
		\<th>Slot</th>
		\<th>Image</th>
		\<th>Change</th>
	\</tr>
	\<tr>
		\<td>Head</td>
		\<td>
			\<<for _i, _item range $head>>
				\<<if _item.equipped>>
					\<img @src="[_item.image]" width="100px">
					\<<break>>
				\<</if>>
			\<</for>>
		\</td>
		\<td>[[Change|Head]]</td>
	\</tr>
	\<tr>
		\<td>Top</td>
		\<td>
			\<<for _i, _item range $top>>
				\<<if _item.equipped>>
					\<img @src="[_item.image]" width="100px">
					\<<break>>
				\<</if>>
			\<</for>>
		\</td>
		\<td>[[Change|Top]]</td>
	\</tr>
	\<tr>
		\<td>Bottom</td>
		\<td>
			\<<for _i, _item range $bottom>>
				\<<if _item.equipped>>
					\<img @src="[_item.image]" width="100px">
					\<<break>>
				\<</if>>
			\<</for>>
		\</td>
		\<td>[[Change|Bottom]]</td>
	\</tr>
	\<tr>
		\<td>Feet</td>
		\<td>
			\<<for _i, _item range $feet>>
				\<<if _item.equipped>>
					\<img @src="[_item.image]" width="100px">
					\<<break>>
				\<</if>>
			\<</for>>
		\</td>
		\<td>[[Change|Feet]]</td>
	\</tr>
\</table>

My problem now is that I’m not even sure if I’m using correct way to define items since I tried looking and experimenting a little but I can’t find a right way to equip some other item on let’s say head and in the process remove whatever is there already.

I plan to give all items unlocked and equipped info since there will be shop as well.

Thanks in advance.