Jqueryは、同じクラスのそれぞれを追加および変更します

ナビゲーションバーからコンテンツを取得し、それを変更してモバイルメニューに追加しようとしています。ナビゲーションバーのhtmlは次のようになります

  <div id="top_bar" class="nav">
                <div class="container">
                    <div class="row">
                        <nav class="clearfix">
                            <a href="http://127.0.1.1:8080/my-account" class="top-bar-link"><span>My Account</span></a>
                            <a href="http://127.0.1.1:8080/" class="top-bar-link"><span> Rewards</span></a>
                            <a href="http://127.0.1.1:8080/" class="top-bar-link"><span>Customer Service</span></a> 
                        </nav>
                    </div>
                </div>
            </div>

上記のアンカーを次のメニューに追加して、以下の形式で機能させる必要があります。

<ul id="stmobilemenu" class="visible-xs visible-sm show">
    <li class="stmlevel0"><a href="http://127.0.1.1:8080/first" style="" class="ma_level_0">first</a></li>
    <li class="stmlevel0"><a href="http://127.0.1.1:8080/second" style="" class="ma_level_0">second</a></li>
    <li class="stmlevel0"><a href="http://127.0.1.1:8080/third" style="" class="ma_level_0">third</a></li>
</ul>

私はこれを次のようにしようとしました

   var add_to_menu;
   $('#top_bar nav a').each(function(){  
        var line  = '<li class="stmlevel0">';
        $(this).addClass('ma_level_0'); 
        line += $(this).html();
        line += '</li>';
        add_to_menu += line;

})
   $('#stmobilemenu').append(add_to_menu);

この結果、未定義で追加され、その後、このタイプの形式で追加されたコンテンツのみが追加されました。

<li class="stmlevel0"><span>My account</span></li>

追加したいのはこのタイプです

<li class="stmlevel0"><a href="http://127.0.1.1:8080/my-account" style="" class="ma_level_0"><span>My account</span></a></li>

私が試したもう一つのことは

$('#stmobilemenu').append(
    $('#top_bar nav a').each(function(){            
        $(this).prepend('<li class="stmlevel0">'); 
        $(this).addClass('ma_level_0');   
        $(this).append('</li>');         
}));

しかし、これにはいくつか問題がありました。まず、appendとprependは、実際には必要なhtmlを囲んでいませんでした。それは次のように出てきます

<a href="http://127.0.1.1:8080/my-account" class="top-bar-link ma_level_0">
    <li class="stmlevel0"></li>
    <span>My account</span>
</a>

だから私は実際にaを囲むためにそのliが必要です。また、実際に#top_bar nav aは元の場所からコンテンツを削除しましたが、これは私が望んでいることではありません。コピーしてモバイルメニューに追加するだけにしたい。誰かが助けることができますか？