You're confusing TCP connections with sockets. A socket is not a network-level concept. Is is an OS concept. A TCP connection exists on the network as a unique combination of (source-ip, source-port, dest-ip, dest-port). A socket is a handle to an open port or an open connection (this statement is slightly simplified). When I got started I also thought this was confusing and an OS design error (but it is what it is and we are stuck with it). The design error is that the allowed operation for each of the different sockets are very much different. These use cases should have been two independent concepts with different names and different APIs.
As you can see there is no 1:1 relationship between sockets and connections.
Can someone describe this thoroughly with step-by-step algorithm
A server opens a socket to let the OS know that it wants to listen or connect. Then, every accepted connection will result in a new, independent socket. Every new connection is on the same server-ip and server-port though. Just the client-ip and/or client-port are different. The server reads and writes on the per-connection sockets. The open-port socket is just for accepting new connections.
The server conceptually goes like this:
var openPortSocket = Open(80); //HTTP port
while(true) {
var connectionSocket = openPortSocket.Accept();
ServeConnectionOnNewThread(connectionSocket);
}
This is a logical model. The actual API calls are different. Most servers use async IO for example. That is not relevant to your question though.
Clients must use a different client port for each connection. This is exactly what your browser does.