JSFiddle - React, Tailwind, and code Playground

HTML

<script>
device = "desktop"; // This could be either: "desktop", or: "mobile"

if(device === "desktop"){
		document.querySelector(".mobile_only").remove();
} else {
		document.querySelector(".desktop_only").remove();
}
</script>

<!--
THE PROBLEM:
The script above should delete either: <div class="desktop_only">, or: <div class="mobile_only"> with everything inside of it, but this only works, when I place the script after these divs, but I can't do that, because the divs contain scripts themself and I have to delete them before they are being run.

Maybe one solution would be:
I have an empty <div> called, let's say: "platform_dependent" and I have two external files called: "desktop_only.something" and "mobile_only.something" and then I load the content of on of these files into: class="platform_dependent".innerHTML …but I don't know how to do this?
-->

<section class="desktop_only">
    <script src="example.js"></script>
    <script> console.log("desktop_only") </script>
    <div> desktop </div>
</section>

<section class="mobile_only">
    <script src="example.js"></script>
    <script> console.log("mobile_only") </script>
    <div> mobile (Delete this.) </div>
</section>