一つのリンクをPC用URLとスマホ用URLに切り分ける

同一ページに複数設置しているhrefのリンクをJavaScriptで切り替えることをしたかったのですが、一番目のtextのhrefは切り替わってましたが、2つ目はhoge0のＵＲＬのまま表示されます。idでやっているから一つ目以外には適用できてないと思いクラスに変更したのですが、こちらに変更したら全てのhrefが切り替えられなくなりまし。
レクチャーいただければ幸いです。

<p>text</p> <ul> <li><a class="js-changeLink" href="hoge0.html" target="_blank"></a></li> </ul> <p>text2</p> <ul> <li><a class="js-changeLink" href="hoge0" target="_blank"></a></li> </ul>

idで上手くいってる

document.addEventListener('DOMContentLoaded', () => { function uaLinkChanger($id,$url) { var link = document.getElementById($id); var ua = navigator.userAgent; if ((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) { link.href = $url; } } //const clinic_line = 'https://line.me/R/ti/p/@662lfdvr'; uaLinkChanger('js-changeLink','hoge1.html'); })

classに変更するとうまくいかない

document.addEventListener('DOMContentLoaded', () => { function uaLinkChanger($class,$url) { var link = document.querySelectorAll($class); var ua = navigator.userAgent; if ((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) { link.href = $url; } } //const clinic_line = 'https://line.me/R/ti/p/@662lfdvr'; uaLinkChanger('js-changeLink','https://line.me/R/ti/p/@662lfdvr'); })