Why is only the first UI button visible on this gameobject?

The UI object looks like this: Imgur: The magic of the Internet

Here is the Heirarchy of the gameobject: Imgur: The magic of the Internet

I want all of the buttons to look like the first one(the one that says 20 credits). They should all have the white box around them.

-There is no difference between the buttons(I literally just copy pasted)

-Changing the z value on these buttons only works on the first button(the one that says 20 credits). In the picture shown, I made the z value of the first button -1, and that is why it is visible. If the z value of that button is 0, then it looks blue like the other buttons

-Setting the z value of the other buttons does nothing

-Whatever button is moved to the top of the order in the hierarchy becomes white and visible, provided you then change the z value of that button(to anything. it doesn’t have to be -1. Positive 1, or any value at all that is not 0, makes it visible)

-All of the buttons and the blue rectangular background are a simple image with the Default UI Material, with nothing changed.

-Unity 2017.4.1f1

You should (almost) never change the z-value of UI elements. To order, change the hierarchy in Unity. In this case, it seems like the blue background is actually part of the button. Therefore, when duplicated, it will be rendered on top of any other buttons after it in the hierarchy.

To avoid other rendering issues, also make sure the z-value of all elements is 0.