webrtc video chat doesn't work when 3rd person joins the chat

im trying webrtc for the first time for a video chat app , i want up to 3 person in each chat ... my code works fine with 2 person chat

but as soon as 3rd person joins the chat everything goes wrong ... i get multiple video tags in the page and none of them are from the 3rd pear .... i'd appreciate any pointers or suggestion most tutorials cover 2 person chat

here is working url

https://chate-test-3000.herokuapp.com/

here is my code

const PEARS = [];
var video_counter = 0 ;
const STREAMES = [] ;

var myVideoArea = document.querySelector('#myvideo');

var configuration = {
    'iceServers': [{
        'url': 'stun:stun.l.google.com:19302'
    }]
};
var rtcPeerConn;

const ROOM = 'caht1';
const SIGNAL_ROOM = 'newsingal1234567898765';

io = io.connect("" ,  {transports:['websocket']});
io.emit('ready' , { chat_room : ROOM , signaling_room : SIGNAL_ROOM});


io.emit('signal' , { text :'ready for video ? ' , room : SIGNAL_ROOM , type : 'user_here'});
io.on('signlaing_message' , function(data){

   console.log('signal recived');
   console.log(data);

  if(!PEARS.includes(data.pear_id))
  {
    console.log('adding new pear --- ' , data.pear_id);
    PEARS.push(data.pear_id);
    startSignaling(data.pear_id);
  }

  if (data.type != "user_here")
  {
        var message = JSON.parse(data.message);
        if (message.sdp) {
            rtcPeerConn.setRemoteDescription(new RTCSessionDescription(message.sdp), function () {
                // if we received an offer, we need to answer
                if (rtcPeerConn.remoteDescription.type == 'offer') {
                    rtcPeerConn.createAnswer(sendLocalDesc, logError);
                }
            }, logError);
        }
        else {
            rtcPeerConn.addIceCandidate(new RTCIceCandidate(message.candidate));
        }
  }

})


function startSignaling(pear_id) {


    if(!rtcPeerConn)
    rtcPeerConn = new RTCPeerConnection(configuration);

    // send any ice candidates to the other peer
    rtcPeerConn.onicecandidate = function (evt) {
        if (evt.candidate)
            io.emit('signal',{"type":"ice candidate", "message": JSON.stringify({ 'candidate': evt.candidate }), "room":SIGNAL_ROOM});
        displaySignalMessage("completed that ice candidate...");
    };

    // let the 'negotiationneeded' event trigger offer generation
    rtcPeerConn.onnegotiationneeded = function () {
        displaySignalMessage("on negotiation called");
        rtcPeerConn.createOffer(sendLocalDesc, logError);
    }

    // once remote stream arrives, show it in the remote video element
    rtcPeerConn.ontrack = function (evt) {
        displaySignalMessage("going to add their stream...");

        video_counter++ ;
        let vid = 'video-box-'+video_counter  ;
        console.log('adding new STREAM  !!')
        console.log('###### streams  ' , evt.streams);

        if(!STREAMES.includes(evt.streams[0].id))
        {
            STREAMES.push(evt.streams[0].id);
            $('#video-wrapper').append(`<video data-id="${evt.streams[0].id}" id="${vid}" autoplay loop autobuffer muted playsinline controls></video>`);
            console.log(' video length ..... ' , $('#video-wrapper').find('#'+vid).length );
            var theirVideoArea = $('#video-wrapper').find('#'+vid)[0];
            console.log(theirVideoArea);
            theirVideoArea.srcObject = evt.streams[0] ;
            theirVideoArea.play();
        }
        
    };

    // get a local stream, show it in our video tag and add it to be sent
        navigator.getUserMedia = navigator.getUserMedia  || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        navigator.getUserMedia({
            'audio': true,
            'video': true
        }, function (stream) {
            displaySignalMessage("going to display my stream...");

            myVideoArea.srcObject = stream
            myVideoArea.play();

            for (const track of stream.getTracks()) {
            rtcPeerConn.addTrack(track, stream);
            }

        }, logError);

}


function sendLocalDesc(desc) {
    rtcPeerConn.setLocalDescription(desc, function () {
        displaySignalMessage("sending local description");
        io.emit('signal',{"type":"SDP", "message": JSON.stringify({ 'sdp': rtcPeerConn.localDescription }), "room":SIGNAL_ROOM});
    }, logError);
}

function logError(error) {
    $('#error-area').append(`<div> ${error.name} : ${error.message}</div>`);
}

function displaySignalMessage(text  ){
    $('#signal-area').append(`<div>${text}</div>`);
}

i also use a simple nodejs server for signaling and use socket.io to connect to the server

from webrtc video chat doesn't work when 3rd person joins the chat