Problems while trying to apply CSS style to a specific HMTL div?

The below HTML structure wraps two pages or views in a single view, you can go to the second view by clicking in the “Next” button at the bottom of the first view:

<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<script>
   function show(shown, hidden) {
     document.getElementById(shown).style.display='block';
     document.getElementById(hidden).style.display='none';
   
     return false;
   }
   
   
</script>
<crowd-form answer-format="flatten-objects">
   <crowd-instructions link-text="View instructions" link-type="button">
   </crowd-instructions>
   <!-- Page number one (part 1) -->
   <div id="Page1">
      <h2>Part 1/2</h2>
      <button type="button" class="d-block mr-0 ml-auto" onclick="return show('Page2','Page1');"> Next</button>
   </div>
   <!-- Page number one (part 1) -->
   <!-- Page number two (part 2) -->
   <div id="Page2" style="display:none">
      <h2>Part 2/2</h2>
   </div>
   <!-- Page number two (part 2) -->
</crowd-form>

How can I apply this CSS style, to the second view of the page?:

<style>

[data-testid=crowd-submit] {
  display: none;
}

</style>

So far I tried this, however, it is not hidding the submit button from the first view. What is the correct way to apply to the below HTML portion:

  <!-- Page number one (part 1) -->
  <div id="Page1">
    <h2>Part 1/2</h2>



    <button type="button" class="d-block mr-0 ml-auto" onclick="return show('Page2','Page1');"> Next</button>

   </div>

Answer

The CSS should look like this:

[data-testid="crowd-submit"] {
  display: none;
}

And the JavaScript:

function show(shown, hidden) {

document.getElementById(shown).style.display = 'block';

document.getElementById(hidden).style.display = 'none';

document.querySelector('[data-testid="crowd-submit"]').style.display = 'inline-block';   return false;
}