simple controller with a SOQL query returning data. Need help writing the test class for this! An admin with minimal development experience...

 

public with sharing class CommunitiesNotificationsList {
@AuraEnabled
    
public static List <Communities__c> notifications(String Name, String Position){

        return [SELECT Full_Description__c, Related_Product__c FROM Communities__c 
                WHERE RecordType.Name = 'Notification' AND Related_Product__c =: Name LIMIT 1];
        
}
}

 

I want the functionality for multiple modals to open in a visualforce page, from multiple icons. Below is the code that works, BUT on page load both modals appear and have to exit out of them for the rest to work.

Is there an easier way? I am not a developer and this is what I have so far, so any guidance is appreciated!
 

<apex:page lightningStylesheets="true" showHeader="false">
<apex:slds />

<div class="slds-grid slds-wrap" >

	<div class="slds-text-align_center slds-col slds-p-around_large slds-large-size_1-of-8 slds-x-small-size_8-of-8 slds-medium-size_2-of-8 slds-p-bottom_medium slds-p-right_medium"  >
	<a  >
	<div class="xxx" onClick="document.getElementById('id01').style.display='block'" >
		<img src="/sfsites/c/resource/xxx/xxx.png" alt="xxx" text-align="center" />
		<span> xxx </span>
	</div>	
	</a>
	</div>

<div id="id01" >
  <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-hidden="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
      <header class="slds-modal__header">
        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header Number 1</h2>
      </header>
      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
        <p>Test Modal Number 1. This is the first one to appear with this text.</p>
      </div>
      <footer class="slds-modal__footer">
        <button class="slds-button slds-button_neutral" onclick="document.getElementById('id01').style.display='none'">Cancel</button>
      </footer>
    </div>
  </section>
  <div class="slds-backdrop slds-backdrop_open"></div>
</div>


	<div class="slds-text-align_center slds-col slds-p-around_large slds-large-size_1-of-8 slds-x-small-size_8-of-8 slds-medium-size_2-of-8 slds-p-bottom_medium slds-p-right_medium"  >
	<a  >
	<div class="xxx" onclick="document.getElementById('id02').style.display='block'" >
		<img src="/sfsites/c/resource/xxx/xxx.png" alt="xxx" text-align="center" />
		<span> xxx </span>
	</div>	
	</a>
	</div>
    

<div id="id02" >
  <section role="dialog" tabindex="-2" aria-labelledby="modal-heading-02" aria-hidden="true" aria-describedby="modal-content-id-2" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
      <header class="slds-modal__header">
        <h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">Modal Header NUMBER 2</h2>
      </header>
      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-2">
        <p> TEST MODAL NUMBER 2 OPEN AND CLOSE </p>
      </div>
      <footer class="slds-modal__footer">
        <button class="slds-button slds-button_neutral" onclick="document.getElementById('id02').style.display='none'">Cancel</button>
      </footer>
    </div>
  </section>
  <div class="slds-backdrop slds-backdrop_open"></div>
</div>


</div>


<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

// Get the modal
var modal = document.getElementById('id02');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

</script>

</apex:page>