title: Javascript Issue with aria-hidden popup
body: <p>I have this ajax code that gets a <code>res.json(event)</code> from the server and then creates an object based on the value received.</p>
  
  <p>Here is part of that code:</p>
  
  <pre><code> html += `&lt;div class="card-header" id="headingOne-${i}"&gt;` +
  `&lt;div class="event-time"&gt;&lt;time class="published" datetime="2017-03-24T18:18"&gt;${data[i].events.targetReminder} | ${data[i].events.targetAmPM}&lt;/time&gt;&lt;div class="more"&gt;   &lt;svg class="olymp-three-dots-icon"&gt;&lt;use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"&gt;&lt;/use&gt;   &lt;/svg&gt;&lt;ul class="more-dropdown"&gt;&lt;li&gt;&lt;a href="#" onClick="reply_click()" id ="mark-${i}"&gt;Mark as Completed&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="#" id ="delet-${i}"&gt;Delete Event&lt;/a&gt;   &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;` +
  `&lt;h5 class="mb-0 title"&gt;&lt;a href="" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" &gt;${data[i].events.title}&lt;i class="fa fa-angle-down" aria-hidden="true"&gt;&lt;/i&gt;` +
  `   &lt;span class="event-status-icon" data-toggle="modal" data-target="#public-event"&gt;&lt;svg class="olymp-calendar-icon" data-toggle="tooltip" data-placement="top" id ="uncomplet-${i}"data-original-title="UNCOMPLETED"&gt;&lt;use xlink:href="svg-icons/sprites/icons.svg#olymp-calendar-icon"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/a&gt;&lt;/h5&gt;&lt;/div&gt;` + 
  `&lt;div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#headingOne-${i}"&gt;&lt;div class="card-body" id="${data[i].events._id}" onClick="reply_click()"&gt;${data[i].events.caption}&lt;/div&gt;&lt;div class="place inline-items"&gt;&lt;svg class="olymp-add-a-place-icon"&gt;&lt;use xlink:href="svg-icons/sprites/icons.svg#olymp-add-a-place-icon"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;span&gt;${data[i].events.location}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;`;
  </code></pre>
  
  <p>And here is the output of the code:</p>
  
  <p><a href="https://i.stack.imgur.com/Ig1tk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ig1tk.png" alt="enter image description here"></a></p>
  
  <p>The aria-hidden that I'm talking about is this one</p>
  
  <pre><code>&lt;div class="modal fade" id="public-event" tabindex="-1" role="dialog" aria-labelledby="public-event" aria-hidden="true"&gt;
  </code></pre>
  
  <p>What I have tried and already know it's not a proper solution is here</p>
  
  <p><strong>Code test</strong></p>
  
  <p>I created a script that change <code>aria-hidden =&gt; true or false</code> but I don't know how to link it with my box</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function reply_click()
      {
  
          document.getElementById('public-event').setAttribute('aria-hidden', 'false');
      }
    &lt;/script&gt;
  </code></pre>
  
  <p>another failed try: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function reply_click()
      {
         alert('this function is called')
          $(`#mark-${i}`).onclick = function() {
              document.getElementById('public-event').setAttribute('aria-hidden', 'false');
          }; 
  
      }
    &lt;/script&gt;
  </code></pre>
  
  <p>I also added in the HTML this function <code>onClick="reply_click()"</code> but nothing is happening. I only get the <code>alert('this function is called')</code></p>
  
  <p>Could you suggest me an idea, please?</p>