汎用性の高いjsコードの作成とその説明をいただきたいです。

【教えてもらいたいこと】
プログラミング/フロントエンド JavaScript HTML/CSS

【具体的な相談内容】
お世話になります。

javascriptの学習中です。
WEB上でサンプルコードを探したのですが、なかなか目的に合ったものがなく、コード作成とそのjavascriptの説明をいただける方を募集します。

【サンプルhtml例】
<div class="wrap">
<div class="wrap-inner">
<div class="item">
<div class="loop">
<div class="loop-text">
<div class="loop-item">
<span>テストAコンテンツ</span>
</div>
</div>
<div class="contents">
コンテンツ内容
</div>
</div>
</div>
<div class="item">
<div class="loop">
<div class="loop-text">
<div class="loop-item">
<span>テストBの内容が入ります</span>
</div>
</div>
<div class="contents">
コンテンツ内容
</div>
</div>
</div>
<div class="item">
<div class="loop">
<div class="loop-text">
<div class="loop-item">
<span>Cエリア</span>
</div>
</div>
<div class="contents">
コンテンツ内容
</div>
</div>
</div>
</div>
</div>

【やりたい事】
wordpressのループで吐き出した文字列（文字列の文字数は統一されていない※class loop-item部分）を100vwで横スクロールループで行いたいです。

イメージとしてjavascriptでloop-itemのwidthを取得、loop-itemのクローンを生成して２個繋げ、loop-itemのwidth分をtranslateで移動させる、というやり方が良いのかなと思っていますが、そのコードが上手く書けず行き詰まってしましました。
もし上記の方法以外により冗長にならず、こういった処理が良いなどがあればご教示いただきたいです。

また今回のような汎用性の高いscriptが必要となった場合、継続的にご相談可能な方がいれば嬉しいです。

一回あたりの予算2000円程度でお願いできればと思います。
よろしくお願いいたします。

【希望相談スタイル】
技術的な質問・相談

【目安予算】
10000円