javascript - Opening one jquery modal dialog at a time when unable to assign div ids

I have been working on this issue for a few days, and am asking my question since I can't seem to find an answer on stackoverflow or from Google. If it's simply that I haven't articulated it correctly please point me to the existing question and answer.

I am writing my first web app using PHP OOP, and have implemented a search feature. The results from the user's search are put into a search results view that has this html (the view is passed to a template that has complete html formatting), and populates a button with each listing that says "contact a coordinator about this study":

<?php foreach($results as $result): ?>

 <article>

<h1><?=$result['study_name']?>: <?=$result['study_topic']?>, by <?=$result['conducting_facility']?> in <?=$result['facility_location']?><br>
Phase <?=$result['phase']?></h1><br>  
<p><?=$result['study_summary']?></p>
<br>

 <div title="Contact A Coordinator" id="specific_study">
<form id="contact_form" name="contact_form" action="/users/p_sendmessage" method="POST">
  First name: <input type="text" name="first_name" minlength="2" required><br>
  Last name: <input type="text" name="last_name" minlenth="2" required><br>
  Preferred Email: <input type="email" name="preferred_email" required><br>
  Study Name: <input type="text" name="study_name" value="<?=$result['study_name']?>">  <br>
  Your message: <textarea name="message" ></textarea> 
</form>
</div>

<button >Contact a coordinator about this study</button>

<script src="/js/main.js"></script>
<script>$("#contact_form").validate();</script>

</article> 
<br>

<?php endforeach; ?> 
Copy code

The javascript that the view calls is jquery UI's dialog function, which I have written like this:

$('.contact_coordinator').click(function() {
    $('.contact_btn_info').dialog('open');
}); 



$('.contact_btn_info').dialog({
autoOpen: false, 
height: 450,
width: 350, 
modal: true,
buttons: {
    "Send Message": function() {
        $("form[name='contact_form']").submit()
        $('#contact_form').submit();
            $(this).submit();
        $('.contact_btn_info').submit();
    }
}
});
Copy code

My goal is that when there are multiple search results in the view, each instance of the button should load just the dialog modal window with its respective study name pre-populated. As the JS is written now, each button click opens a modal window for all the search results, layered on each other. I understand how to select IDs versus a class to trigger just one window at a time, but my issue is that I can't pre-assign IDs in the html when the search results depend on the user input. I also tried assigning an ID to the html that is there, "specific_study," but when I employed that in the JS and tried out the page, every search result's button gave me only the first result's study name pre-populated.

I can't be the first person with this coding goal, so I hope someone can help! Thank you in advance.