I have a lightning component that displays a modal when a button is clicked. Based on the ID stored in the dataset of the clicked element when the modal is loaded the action should look for a div that contains the ID and set it to display block. But I'm running into an issue where when I look for the div it should unhide it returns null.

component:
```
<aura:component controller="DataDictionaryController" implements="flexipage:availableForAllPageTypes" access="global" >
    
    <aura:attribute name="dataFields" type="Data_Field__c[]" />
    <aura:attribute name="dataObjectId" type="String" />
    <aura:attribute name="isModalOpen" type="boolean" default="false"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th></th>
                        <th>Label</th>
                        <th>API Name</th>
                        <th>Data Type</th>
                        <th>Owner</th>
      					<th>Description</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Label</th>
                        <th>API Name</th>
                        <th>Data Type</th>
                        <th>Owner</th>
      					<th>Description</th>
                    </tr>
                </tfoot>
                <tbody>
                    
                <aura:iteration items="{!v.dataFields}" var="item">
                    <tr>
                        <td>
                            <div onclick="{! c.openModel }" data-dataFieldId="{!item.Id}" class="hello">
                            	<lightning:button variant="brand" label="Info" title="Info" />
                            </div>
                        </td>
                    	<td>{!item.Label__c}</td>
                    	<td>{!item.Name}</td>
                    	<td>{!item.Data_Type__c}</td>
                    	<td>{!item.Business_Owner_ID__c}</td>
                    	<td>{!item.Description__c}</td>
                    </tr>    
                </aura:iteration>
                    
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="slds-m-around_xx-large">
        <aura:if isTrue="{!v.isModalOpen}">
            <section id="dataFieldModal" role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="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">Field Details</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <aura:iteration items="{!v.dataFields}" var="item">
                            <div id="{!'dataFieldDetail-' + item.Id}" style="display: none" >
                                <p>
                                	Info goes here...<br />
                                    {!item.Id}<br />
                                    {!item.Name}
                                </p>
                            </div>
                        </aura:iteration>
                    </div>
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral" label="Close" title="Close" onclick="{! c.closeModel }"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
    </div>    
    
</aura:component>
```

controller
```
	openModel: function(component, event, helper) {
        component.set("v.isModalOpen", true);
        var ctarget = event.target;
        var id_str = ctarget.getAttribute('data-dataFieldId');
        var modalobj = document.getElementById("data-fieldDetail" + id_str);
        modalobj.style.display = "block";
    },

```

The Component Error I get is: Cannot read properties of null (reading 'style').

Any help would be much appreciated!!