How to display something in a div when the user clicks on a text in another div – no page refresh [closed]

I am trying to make some customizations to my site, but I got stuck at this point.

I have two divs and I put into the first div the names of some product tags.

Now I need that when I click on one of these names – to display a shortcode in the second div.

And for generating the shortcode I need to use the ID of the product tag as one of the arguments so I think I need to also somehow temporary store the ID.

This has to be done without refreshing the page so I’m guessing I would need to use AJAX. But here is the problem: I don’t have AJAX knowledge so I’m not sure what to do here.

This is my code up until now:

<div class="modal-content">

<div class="modal-body">      
  <h3>Section I:</h3>      
<?php 
  //Here I obtain an array with the product tags of a product with an ID of 62:
  $term_list = wp_get_post_terms(62, 'product_tag', array("fields" => "all"));
  //I list the product tags obtained:
  if ( $term_list ){
  foreach ($term_list as $term){
  echo $term->name; 
  }
  }
?>  
</div>
<hr/>

<div class="modal-body">
  <h3>Section II:</h3>
  <p>Here should be displayed the shortcode, based on the product tag the user chose to click in the Section I.</p>    
</div>

</div>

Some more details:

I actually am building a WooCommerce site (that’s why I have products and product tags). The shortcode is going to display a calendar.

For creating the calendars I am using a plugin called “Pinpoint Booking System PRO” and this plugin gives me the option to set the ID of the calendar myself so I set it to the same value as the ID of the product tag. Because I’m trying to associate a calendar to each product tag.

So that – when a user clicks on a tag name that I display in the section 1 – I’d be able to use the ID of that product tag as a parameter in the shortcode, that looks like this: [dopbsp id=5] and display the associated calendar.

I hope someone can help! Thank you!