値をpost送信した際の送信先でのjavascriptを使用した取得、設定方法

大変お世話になっております。

あるサイト①から他のサイト②を開く際に①の値をget送信し、その開いたサイト②にて、urlから値を取得し、更に他のサイト③にその値を送信するために、その値を②にて代入する以下の様な設定が機能しております。

これをget送信でなく、method="post"の様にpost送信にした場合、サイト②ではどのように取得し、値を代入すれば宜しいかご教授頂けませんでしょうか。

つまり、以下のサイト①でmethod="post"を使用した場合のサイト②内でのjavascriptの記述方法をご教授頂けませんでしょうか。

サイト①
<form name="reserve" method="get" action="http://xxxx.com/send.html">
<input type="hidden" name="id" value="{$product.id}" />
<input type="submit" value="送信する" class="sendButton">
</form>


サイト②
http://xxxx.com/send.html?id=7

<script type="text/javascript"> 
const url = new URL(location.href);
const id = url.searchParams.get("id");
</script>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('id').value = id;
  });
</script>

<form id="Form" method="post" action="xxxxxxx">
<input name="id" id="id" type="hidden" value="" />
<input type="submit" value="送信する" class="sendButton">
</form>

追記：

サイト①
php:
<?php
    $post_json_data = json_encode($_POST);
?>


<form name="reserve" method="post" action="http://xxxx.com/send.html">
<input type="hidden" name="id" value="{$product.id}" />
<input type="hidden" name="cusotmer_id" value="{$smarty.get.cusotmer_id}" />
<input type="submit" value="送信する" class="sendButton">
</form>


サイト②
http://xxxx.com/send.html

<script type="text/javascript"> 
const post_data = <?php echo $post_json_data; ?>;
</script>

＊＊＊
<h1><input type="text" disabled name="cusotmer_id" id="cusotmer_id" value=""></h1>

<form id="Form" method="post" action="xxxxxxx">
<input name="id" id="id" type="hidden" value="" />
<input name="customer_id" id="customer_id" type="hidden" value="" />
<input type="submit" value="送信する" class="sendButton">
</form>

頂きました記述をもとに、json_encode、およびもう一方の個々に取得する方法の両者を試しておりますが、どうしても両者とも値を取得、そして設定できません。

実際は、値が複数存在しますので、json_encodeで試した記述を追記に補足しました。サイト②のjavascriptで取得した値であるpost_dataはどのようにhtml上でそれぞれのvalueに設定されるのでしょうか。試しにサイト②の＊＊＊でcusotmer_idを表示させてみると[object HTMLCollection] と表示されます。