insertAdjacentHTMLで重ねて追加

前提・実現したいこと

追加ボタンを押すと、カードの形をしたdiv要素を同じ場所に重ねて追加していくプログラムが作りたいです。
そこで、JavaScriptでinsertAdjacentHTMLというコードを使って追加してみました。
しかし、追加されたときにdiv要素が重ねられず困っています。
（何度追加しても同じ場所に出現しつづけ、かつ前に追加したdiv要素は動かしたくありません）

試したこと

insertAdjacentHTMLの追加される位置の指定で使える'beforebegin''afterbegin''beforeend''afterend'を試してみましたが、いずれも重ねて追加されませんでした。
この画像のように、重ならずずれて追加されていきます

ソースコード

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="音響プログラム.css"> <title>音響プログラム</title> </head> <body> <h1>音響プログラム</h1> <p><div id="MusicCount" style="display: inline-block; _display: inline;">合計0音</div> <input type="button" value="音を追加" id="tsuika" class="tsuika" onclick="tsuikaClick()"> <p style="display:inline;" id="jikken"></p></p> <div id="idogo"></div> <div class='saisei' id="saisei"></div> <input type="button" value="終了" class="tsuika" onclick="hozonClick()"> <p id="aa"></p>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="cmanObjMove_v091.js"></script> <script src="音響プログラム.js"></script> <script src="jquery-ui.js"></script> <script src="jquery-ui.min.js"></script> </body> </html>

JavaScript
//追加ボタンをクリックしたときの処理
function tsuikaClick() {
//ClickCountCountを1増やす
ClickCount++;

//MusicCountを1増やして表示
MusicCount++;
var mp = document.getElementById("MusicCount");
mp.innerHTML = "合計"+MusicCount+"音";

//ClickCountを対応させる
var DivID = 'card'+ClickCount;
var FileID = 'InputFile'+ClickCount;
var card =   '<div id='+DivID+' style="cursor:pointer" class="MusicBox" onMouseEnter="HoverHandler()">'+ClickCount+'<input type="file" id='+FileID+'><input type="button" value="音を削除" class="sakujo" id='+ClickCount+'></div>'

//HTMLへ出力
var tsuika = document.querySelector('.saisei');
tsuika.insertAdjacentHTML('beforebegin',card);

//削除ボタンがクリックされたときのプログラム
$('.sakujo').on('click', function(){
    var NewButtonId =  $(this).attr("id");
    var element = document.getElementById('card'+NewButtonId); 
    element.remove();
    MusicCount--; //MusicCountを1減らす
    var mp = document.getElementById("MusicCount");
    mp.innerHTML = "合計"+MusicCount+"音";
});

//cardを自由に配置できるようにする
$(function() {
    $('.MusicBox').draggable();
});