Child of Parent

Child of parent issue.

I have 4 spheres which land on top of each other and when there is a collision the sphere will become a child of the one it hits but for some reason after all collisions the hierarchy looks like this:

 >red
   >red
     >red
        >red

My intentions are to have it look like this (one parent and 3 child objects):

 >red
   red
   red
   red 

How would I go about achieving this?

 var whatColor : String;
 
 function OnCollisionEnter  (other : Collision)
 {
     if(whatColor == "red" && other.gameObject.tag == "red")
     {
          other.transform.parent = transform;//makes it a child
     }
     if(whatColor == "yellow" && other.gameObject.tag == "yellow")
     {
          other.transform.parent = transform;
     }
     rigidbody.isKinematic = true;
 }

My intentions in the end are that once there are 3 child objects then destroy the parent something like this:

 function Update()
 {
     if(transform.childCount > 2)
     {
         Destroy(gameObject);
     }
 }

But I can't see if it will work until I get the hierarchy correct. Can someone give me an example of how to code this properly?