How to show hidden pseudo-element with JavaScript

I’m using CSS to hide form elements:

#main_form #form-field-email, #form-field-realtor_select { display: none;}
#main_form .elementor-select-wrapper::before { display: none; }

Then JavaScript to show them with:

document.getElementById("form-field-first_name").onclick = function(){
  document.getElementById('form-field-email').style.display = 'block';
  document.getElementById('form-field-realtor_select').style.display = 'block';

The problem is with the pseudo-element “.elementor-select-wrapper::before” which is needed to hide the down arrow in the select element. I need to get the arrow to display using the JavaScript onclick event. I tried document.getElementsByClassName() but that did not work.

You can see the test page here: Test Page. Click First Name or Last Name to reveal fields (more than listed above) and you’ll see the down arrow is mission from the select element.