Problem with html display none property appearing in page source

Question

I have one page and I have 4 sections with div tags on this page. I print the first of these sections on my page and hide the other sections with the 'display: none' property.

Later, when I click the next button on my page, it hides the first section and removes the 'display: none' property of the second section.

But there is one problem. There are source codes of my 4 sections in the page source. And from here, they can access the content of the relevant section by 'display: block'. Idont want this. What can I do?

<div class="container mt-3" id="features_offer" style="display: block" data-aos="fade-up" data-aos-delay="200">
    <!-- offer -->
</div>

<div class="container mt-3" id="personal_information" style="display: none" data-aos="fade-up" data-aos-delay="200">
    <!-- form -->
</div>

<div class="container mt-3" id="reject_survey" style="display: none" data-aos="fade-up" data-aos-delay="200">
    <!-- survey display -->
</div>

<div class="container mt-3" id="complete" style="display: none" data-aos="fade-up" data-aos-delay="200">
    <!-- success screen -->
</div>

Answer 1

Another option is to use a preformatted text tag and then call a function that changes the inside:

let text = `<div class="container mt-3" id="features_offer" style="display: block" data-aos="fade-up" data-aos-delay="200">
    <!-- offer -->
</div>` //Div element goes here

let condition = true

if (condition == true){
  document.getElementById('divs').innerHTML = text
} /*Only this will be rendered in html, regardless of whether dev tools is open*/

<pre id='divs'></pre>