Display content on iframe after a button click- javascript?

Question

I have two iframes, iframe1 has buttons and iframe2 is supposed to display content if a button is clicked. Example if I click button1 on iframe1, button1.html content should be displayed inside iframe2 and if I click button2 which is on iframe1 then button2.html content should be displayed inside iframe2 (i.e. content which was on iframe1 should be substituted be content relative to each button). (I am using javascript, HTML and CSS only)

Answer 1

The accepted answer for a similar question should allow you to detect button click events in an iframe. This will allow you to set the src attribute in the other iframe. Something like:

  $(document).ready(function(){
    let iframe_two = $("#two").contents();
    let iframe_one = $("#one");
    iframe_two.find("button").click(function(){ 
      iframe_one.attr("src", "https://www.reddit.com") 

    })
  })