title: How to load dynamically a new page from dynamically loaded html?
body: <p>I currently have a problem where I have a pictures page of my webpage which dynamically uploads pictures which the user can upload. Each of the picture cards has a button which can be clicked on to show a new page containing comments about that specific picture. Both the comment and picture info is stored on a server in an array. I'm not sure how to make the button on each picture card generate a new page without coding a new HTML page as its a single page app. Also, how would I go about passing the value of the title of the pic into the new page so that I can filter the comments to only include those about the specific picture?I already have get and post requests which return all the pics and comments from the server.
  <strong>server.js</strong></p>
  <pre><code>function loadpics() {
      document.getElementById('insertpics').innerHTML='' 
      fetch ('http://127.0.0.1:8090/pics',{
          method: 'GET',
          headers: {
              &quot;Content-Type&quot;:&quot;application/json&quot;
          }
       })
      .then((res) =&gt; { return res.json(); })
      .then(pics =&gt; {
          for (let pic of pics){
              const y= `
              &lt;div class=&quot;card&quot; style=&quot;width: 18rem;&quot;&gt;
              &lt;img class=&quot;card-img-top&quot; src=${pic.picurl} alt=&quot;Card image cap&quot;&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                &lt;h5 class=&quot;card-title&quot;&gt;${pic.username}&lt;/h5&gt;
                &lt;p class=&quot;card-text&quot;&gt;${pic.nameofpic}&lt;/p&gt;
              &lt;a  class=&quot;btn btn-info&quot; href=&quot;#&quot; &gt;View Comments on this picture&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
              `;
  
              document.getElementById('insertpics').innerHTML+=y;
          }
      })
  };
  loadpics();
  
  
  </code></pre>
  <p>As you can see I have a button at the end of the card but have no idea how to make it generate a blank page with just the comments linked to that photo on. The picture array has this structure [{&quot;username&quot;:&quot;username&quot;,&quot;picname&quot;:&quot;nameofpic&quot;,&quot;pic&quot;:&quot;pic.png&quot;}] and the comment array has this structure [{&quot;username&quot;:&quot;username&quot;,&quot;picname&quot;:&quot;nameofpic&quot;,&quot;comment&quot;:&quot;comment&quot;}]. Any help would be greatly appreciated ! edit: someone please help.</p>