目的

ボタンをおすとテキストが複製されて画面が埋め尽くされる演出を作りたいです
調べてみてもうまく動くものがありませんでした

問題

ただ、HTMLを増やすとHTMLの数等でCSSを当てている所でデザインが崩れてしまいます
（例：nth-childやjQueryのeq）

  • これの直すのにかなりの時間がかかりそうなので、できればhtmlをふさやないままでテキストを複製したいです

  • また演出がデザインのためなので、じかにhtmlを増やしてしまうよりcssでやるほうが行儀がいいと感じたのでCSSでやりたいです

  • text()でテキストを複製してもその位置が指定できないのでつまってしまいました

ソース

元ソースはもっと複雑で全部のせれないですが、簡単にはこのようになっています
（実際はJQueryやCSSで順番系の指定を使ってると思っていただければ）

<body>
    <div class="wrap">
        <section class="horror_phase3">
            <p>怖い文章</p><button type="button">～ですか?</button>
        </section>
    </div>
</body>

.wrap {
     height: 100vh;
     width: 100%;
     position: relative;
}
 .horror_phase3 {
     z-index: 3;
     position: absolute;
     display: flex;
     width: 100%;
     height: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 .horror_phase3 p {
     display: none;
}

$(".horror_phase3 button").click(function() {
    let count = 1;
    let this1 = $(this);
    this1.prop("disabled", true);
    var counter = setInterval(function() {


        let p = this1.prev().clone();
        this1.parent().append(p.css({
            display: "block",
            position: "absolute",
            top: Math.floor(Math.random() * Math.floor(100)).toString() + "%",
            right: Math.floor(Math.random() * Math.floor(100)).toString() + "%"
        }));
        count++;
        if (count == 100) {
            clearInterval(counter);
        }
    }, 50);
});