Multiple ports of different definitions on same side of components one after another

Hi, I need to create 2 ports with to different definitions. One is single directional and another is multi directional. I have created tow different ports definitions and i want to place it one after another. But it collides at one spot(if I give row:0, column:1). If I give different rows and column it works but I want them one after another.I have attached the code and the images below. Please help

$(go.Panel, "Horizontal",
                    new go.Binding("itemArray", "topArray"),
                    {
                        row: 0, column: 1,
                        alignment: go.Spot.Center,
                        itemTemplate:
                            $(go.Panel,
                                {
                                    _side: "top",
                                    fromSpot: go.Spot.Top,
                                    fromLinkable: true,
                                    cursor: "pointer",

                                },
                                new go.Binding("portId", "portId"),
                                $(go.Shape, "Rectangle",
                                    {
                                        stroke: null, strokeWidth: 0,
                                        desiredSize: portSize,
                                        margin: new go.Margin(0, 0)
                                    },
                                    { toolTip: sharedToolTipPort },
                                    new go.Binding("fill", "portColor"))
                            )  // end itemTemplate
                    }
                ),  // end Horizontal Panel
                $(go.Panel, "Horizontal",
                    new go.Binding("itemArray", "topYellowArray"),
                    {
                        row: 0, column: 0,
                        itemTemplate:
                            $(go.Panel,
                                {
                                    _side: "top",
                                    fromSpot: go.Spot.Top,
                                    toSpot: go.Spot.Top,
                                    fromLinkable: true,
                                    toLinkable: true,
                                    cursor: "pointer",
                                   

                                },
                                new go.Binding("portId", "portId"),
                                $(go.Shape, "Rectangle",
                                    {
                                        stroke: null, strokeWidth: 0,
                                        desiredSize: portSize,
                                        margin: new go.Margin(0, 0, 0, 0),
                                    },
                                    { toolTip: sharedToolTipPort },
                                    new go.Binding("fill", "portColor"))
                            )  // end itemTemplate
                    }
                ),

Here on the top side, the green and the yellow dot should come one after another.

Your request is ambiguous. Could you please show what you want?

Yes sure. Should we fix a meeting for that.

No, just provide a sketch or screenshot of what you want.

You said “i want to place it one after another” and I have no idea of what you want.

Similar to the above image, I need two ports on topSide. One brown(the left one) and one green(the right one). The definitions for both the ports should be different. I have explained the definitions below.

Brown: It should me multi directional(accept To and From Links)
Green: It should me single directional(accept only To direction links)

Well, I assume you have seen this sample already: Dynamic Ports
That allows you to have any and varying number of ports on each side.
You can add a binding or two to control whether GraphObject.fromLinkable is true or not for any particular port.

Did you want one or two, or always two, ports on each of the four sides of the node?

Yes I have used the same example. I am able to create two different ports by name
topArray and topYellowArray but when I place it using rows and column it collides at one places

I am using: row: 0, column: 1, for both.
If I use other combinations like(row: 0, column: 0, row: 0, column: 1), one move to the extreme left right of the node. I need them side by side

Also I need exactly two ports at top side.

Do you want ports on any other side? If so, how many, and will the number vary?