rails7でUncaught TypeError: document.querySerector is not a functionとでます。

実現したいこと

ruby on rails7にて作成中のアプリにjavascriptを適用させたい。
ここに実現したいことを箇条書きで書いてください。

rails7にてアプリを開発しているのですがnew.html.erbの中の要素<div id='fieldsetContainer'>を
button id="addWorkout" onclick="addWorkout()"としてボタンを押した際にjavascriptのquerySerector('#fieldsetContainer')と要素を取得したいのですがrails sをしてボタンを押しても
何も変わりません。
グーグルコンソールにて
Uncaught TypeError: document.querySerector is not a functionとでて要素がうまく取れてない?みたいです。

発生している問題・エラーメッセージ

グーグルのデベロッパーツールにてdocumentからnewIdまでがエラー波線と引かれているようです。
new:81 Uncaught TypeError: document.querySerector is not a function

new:81 const newFieldset = document.querySerector('[id="0"]').outerHTML.replace(/0/g,newId);```
エラーメッセージ

### 該当のソースコード new.html.erb <div class="h-full"> <div class="flex mt-10 justify-center self-center"> <div class="w-full max-w-xs"> <div class="bg-gray shadow-md rounded px-8 pt-6 pb-8 mb-4"> <%= simple_form_for @daily_workout do |f|%> <% input_html_class = "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none"%> <%= f.input :focus%> <%= f.simple_fields_for :lifts do |l|%> <div id='fieldsetContainer'> <fieldset id='0' class="text-red-400"> <%= l.input :name%> <%= l.input :sets%> <%= l.input :reps%> <%end%> </fieldset> </div> <%= f.button :submit %> <%end%> <br /> <button id="addWorkout" onclick="addWorkout()" class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full">Add Lift</button> </div> </div> </div> </div> <script> const addWorkout = ()=> { const lastId = document.getElementById('#fieldsetContainer'); console.log(lastId); const newId = parseInt(lastId,10) + 1; console.log(newId); const newFieldset = document.querySerector('[id="0"]').outerHTML.replace(/0/g,newId); document.getElementById('#fieldsetContainer').insertAdjacentHTML("beforeend", newFieldset) } </script> ### 試したこと config/application.jsにてjqueryを導入とimportしたり querySerectorをgetElementByIdとしたりしましたが上手くいきません。 ここに問題に対して試したことを記載してください。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。