JSFiddle - React, Tailwind, and code Playground

HTML

<div id="debug"></div>
<div id="debug_two"></div>
<div id="one"></div>
<div id="two"></div>

CSS

#one {
    width: 200px;
    height: 200px;
    background: #444;
}

#two{
    width: 200px;
    height: 200px;
    background: #666;
}
#debug, #debug_two {
    float: right;
}
#debug_two {
color: red;    
}

JavaScript

document.addEventListener('touchmove', function(e){ e.preventDefault(); });

areaOne = document.getElementById('one');
areaTwo = document.getElementById('two');
debug = document.getElementById('debug');
debugTwo= document.getElementById('debug_two');

areaOne.addEventListener('touchmove', function(e){
    var touch = e.touches[0];
    var touch_two = {};
    if(e.touches.length == 2){
        touch_two = e.touches[1];
    }else{
        touch_two.pageX = 'none';
    }
    debug.innerHTML= e.touches.length + ' -- ' + touch.pageX + ' -- ' + touch_two.pageX;
    
});

areaTwo.addEventListener('touchmove', function(e){
    var touch = e.touches[0];
    var touch_two = {};
    if(e.touches.length == 2){
        touch_two = e.touches[1];
    }else{
        touch_two.pageX = 'none';
    }
    debugTwo.innerHTML = e.touches.length + ' -- ' + touch.pageX + ' -- ' + touch_two.pageX;
});