鍵盤アプリで、スマホの画面に並んだ鍵盤をなぞった時に、触れた鍵が次々発火するようにするには

いつもお世話になっております。
jQueryでシンセサイザーのような鍵盤アプリを作ろうとしています。
スマホで画面をなぞった時にドレミの音が次々に鳴るようにするにはどうすれば良いですか。

例えば、次のような3個の要素に順に触れるようになぞった時には、ド、レ、ミ、と順に鳴るようにするにはどうすれば良いですか。
<style>div { border: 1px solid; padding: 1em }</style>
<div></div>
<div></div>
<div></div>

色々調べて、次のようなコードを書いたのですが、まだうまく動きません。
const key = $('div')
key.on('touchstart', function() {$(this).css('background', '#000')})
key.on('touchmove', function(e) {
const tc = e.originalEvent.touches[0], top = $(this).offset().top
if(tc.clientY < top || top + $(this).height() < tc.clientY) {
$(this).trigger('touchend')
$(document.elementFromPoint(tc.clientX, tc.clientY)).trigger('touchstart')
}
})
key.on('touchend', function() {$(this).css('background', '#fff')})

このコードは要素に触れるとその要素の色が変わり、離すと元の色に戻るようにしようとしています。
どうも標準の動きでは、タッチ点が次の要素上に来ても、指を離すまでは次の要素でのタッチイベントは発火しないようですので、touchmoveでタッチ点を監視し、タッチ点が次の要素に切り替わった時に、前の要素で強制的にtouchendを発火させ、次の要素で強制的にtouchstartを発火させています。
これにて、1個目の要素から2個目の要素に移った時に、意図した通りに色が変わりました。
しかし、そのまま指を離さずに3個目の要素までなぞった時には、意図した通りに色が変わりません。
この時、2個目の要素の色が消え、3個目の要素に色が付くようにしたいのですが、実際には2個目と3個目の両方の要素に色が付いてしまいます。

また、このコードでは、やむなく強制的にイベントを発火させるという暴挙に出ていますが、可能であればもっと単純な書き方をご教示いただきたく存じます。