Black Lives Matter. Please consider donating to Black Girls Code today.

Why is extendtraces not overlapping over each other but rather creating duplicate x- axis?

$('#Same').click(function(){
  var seconds = document.getElementById("timer").value;
  //make sure inputs are fille out properly
  if (seconds == null || seconds == "" ) {
    alert("Seconds must be filled out");
  }
  // Run if filled out properly
  else {
    //GETTING VALUES OF THE FILLED OUT GRAPHED DATA
    var points = document.getElementById("point").value;
    var seconds = document.getElementById("timer").value;
    var title = document.getElementById("title").value;
    var x = document.getElementById("X").value;
    var y = document.getElementById("Y").value;
    var threshold = document.getElementById("threshold").value;
    //WILL LISTEN FOR MESSAGE BASED ON USERS TIMES, IF USER PICKS 5 SECONDS, THEN IT WILL LISTEN EVERY FIVE SECONDS.
    //GETTING DIV FOR PLOT
    var plotDiv = document.getElementById('myDiv1');
    //LAYOUT FOR PLOTLY GRAPH
    var layout = {
      margin: {
        l: 50,
        r: 50,
        b: 150,
        t: 100,
        pad: .1
      },
      hovermode:'closest',
      title: title,
      xaxis: {
        title: x,
        autorange: true,
        titlefont: {
          family: "Lato, Sans-serif",
          size: 18,
          color: "#002B7F"
        }
      },
      images: [
        {
          x: 1.01,
          y: .95,
          sizex: 0.3,
          sizey: 0.3,
          source: "graphlogo.png",
          xanchor: "left",
          xref: "paper",
          yanchor: "bottom",
          yref: "paper"
        }
      ],
      yaxis: {
        title: y,
        autorange:true,
        titlefont: {
          family: "Lato, Sans-serif",
          size: 18,
          color: "#002B7F"
        }
      }
    };
    var currentdate = new Date();
    var time =currentdate.getHours()%12 + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + ":" + currentdate.getMilliseconds();
    var trace1 = {
      x: [time],
      y: [],
    };

    //Creating the amount of graphs we need BASED ON OUTPUT DATA ARRAY SIZE
    var $graphs=jQuery('#graphs');
    var count=2;
    //IT IS GOING TO CREATE AS MANY TRACES AS ARRAY SIZE, SO IF WE WERE READING THREEE ADDRESSES, TWO TRACES WILL BE ADDED BC ONE IS ALREADY CREATED ABOVE
    socket.once('temp', function(temp){
      for (var i = 1, len = temp.length; i < len; i++) {
          Plotly.addTraces(myDiv1,{x: [time],y: []});
      };
    });



    //IF USER DOES WANT THRESHOLD VALUE
    if ( document.getElementById("threshold").value!='' && document.getElementById("threshold").value!=null) {
      document.getElementById('Scroll').innerHTML = "Scoll Down to see Graph";
      //CREATES PLOT WITH TRACE 1 VAR
      jQuery('<div>', {
        'class': 'myDiv2',
        'id': 'myDiv1',
      }).appendTo($graphs);
      var x=document.getElementById('myDiv' + count);
      var data = [trace1];
      Plotly.newPlot(myDiv1, data, layout);


      //CREATING LINE FOR THRESHOLD
      var update2 = {
        shapes: [
          {
            type: 'line',
            x0: 0,
            y0: threshold,
            x1: points,
            y1: threshold,
            line: {
              color: '#002B7F',
              width: 4,
            }
          }
        ]
      };
      //LIVE STREAMING GRAPH BASED ON USER'S TIME.. IT IS GOING TO UPDATE ALL TRACES WITH PROPER VALUES
      setInterval(function(){
        socket.once('temp', function(temp){
          for (var i = 0, len = temp.length; i < len; i++) {
            var currentdate = new Date();
            var time =currentdate.getHours()%12 + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + ":" + currentdate.getMilliseconds();
            var update = {
              x: [[time]],
              y: [[temp[i]]]
            };
            Plotly.relayout(myDiv1, update2)
            Plotly.extendTraces(myDiv1, update, [i], points);
          }
        });
      }, seconds * 1000);
      //ALLOWS USER TO CLICK ON POINT AND ALERT BOX OF POINT WILL SHOW
      myDiv1.on('plotly_click', function(data){
        var pts = '';
        for(var i=0; i < data.points.length; i++){
          pts = 'x = '+data.points[i].x +'\ny = '+
          data.points[i].y.toPrecision(6) + '\n\n';
        }
        alert('Data point clicked is located at:\n\n'+pts);
      });
    }
    else {
      //IF THERE IS NO THRESHOLD
      //SAME CODE AS ABOVE MINUS THE SHAPES FOR THRESHOLD LINE
      document.getElementById('Scroll').innerHTML = "Scoll Down to see Graph";
      jQuery('<div>', {
        'class': 'myDiv2',
        'id': 'myDiv1',
      }).appendTo($graphs);
      var x=document.getElementById('myDiv' + count);
      var data = [trace1];
      Plotly.newPlot(myDiv1, data, layout);
      setInterval(function(){
        socket.once('temp', function(temp){
            for (var i = 0, len = temp.length; i < len; i++) {
            var currentdate = new Date();
            var time =currentdate.getHours()%12 + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + ":" + currentdate.getMilliseconds();
            var update = {
              x: [[time]],
              y: [[temp[i]]]
            };
            Plotly.extendTraces(myDiv1, update, [i], points);
          }
        });
      }, seconds * 1000);
      myDiv1.on('plotly_click', function(data){
        var pts = '';
        for(var i=0; i < data.points.length; i++){
          pts = 'x = '+data.points[i].x +'\ny = '+
          data.points[i].y.toPrecision(6) + '\n\n';
        }
        alert('Data point clicked is located at:\n\n'+pts);
      });
    }
  }
});

If you look at picture i uploaded, for some reason, the traces do not overlap each other but create identical axises, why is this?? I want it to overlap??