如何用JQUERY给每段加个<p></p>

<p>您好$https://.com</p>
<p>这是啥$https://baidu.com</p>
<p>嗯呐$https://google.com</p>
<div class="box">
<!--这里插入$前面的中文(如：您好)-->
</div>
<div class="box2">
<!--这里插入$后面的中文(如：https://.com)-->
</div>

var box_txt = "";
var box2_txt2 = "";
var txt = "";
var index = -1;
$("p").each(function(i){
   txt = $(this).text();
   index = txt.indexOf('$');
   box_txt += txt.substring(0,index);
   box2_txt2 += txt.substring(index+1,txt.length);
});
$(".box").text(box_txt);
$(".box2").text(box2_txt2);

代码的功能：获取每个

(P的数量不固定)里$前面的内容后输入到<div class="box"></div>如：您好，获取$后面的内容后输入到<div class="box2"></div>里如：https://.com。但是输入的是全部内容，不好进行管理，如何给输入的每段加上P呢？

想实现为：

<div class="box">
<p>您好</p>
<p>这是啥</p>
<p>嗯呐</p>
</div>
<div class="box2">
<p>https://.com</p>
<p>https://baidu.com</p>
<p>https://google.com</p>
</div>

如果能给每个P分别加上CLASS="p-1(数字按多少个P累加)"。- -，不知道我说得清不清楚，还望指教。我对JQUERY以及JAVASCRIPT懂得不多，还麻烦尽量说具体点，谢谢！~

---

var box = [];
var box2 = [];
$("p").each(function(i) {
    arr = $(this).text().split("$");
    box.push('<p>' + arr[0] + '</p>')
    box2.push('<p>' + arr[1] + '</p>')
});
$(".box").html(box.join(""));
$(".box2").html(box2.join(""));