Wordpress Contact-form 7 - Booking form functionality with Jquery

Question

I have created a form using WordPress plugin Contact-form 7. I currently have a field which is a drop-down list, ideally, it would be great to select any option from that list and have a description underneath, that changes each time a subject is selected.

Reason for this is that I'm currently designing a booking form for educational purposes and the drop-down list contains various subjects. Once you click on the subject it would be great if each time it would automatically display the description of that courses beneath it.

.enquiry-contain {
    padding:100px 0;
  }

  .school-enquiry {
    background-color:rgba(0, 0, 0, 0.72);
    border-radius:10px;
    padding:50px;
  }

  .bg-image {

    width:100%;
    background: url(https://www.durrell.org/wildlife/wp-content/uploads/2017/01/MG_3919-v2.jpg) fixed;
    color: #fff;
    height: 100%;
    margin: 0;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .wc-durrell-footer {
    margin-top:0;
  }

  .wpcf7-text, .wpcf7-date, .wpcf7-select, .wpcf7-textarea{
    color: black;
    font-family: 'AvantGardeGothicITCW01B 731069';
    padding:5px;
    border-radius: 5px;≈
  }

  .wpcf7-textarea, .session-choice {    
    width: 100%;
  } 

<?php get_header(); ?>

<section class="bg-image">

<div class="container enquiry-contain">

<h1 style="text-align:center;">Jersey Booking Form</h1>
<div class="row" style="margin: 0 3px 0 3px;">
<div class="col-md-2 hidden-sm"></div>
<div class="col-md-1 hidden-sm"></div>
<div class="school-enquiry col-md-6">
<h6 style="color:#70D100;">Please complete all fields below before you click submit</h6>
<?php echo do_shortcode('[contact-form-7 id="10012426" title="Jersey school booking form"]'); ?>
</div>
</div>
  
</div>

</section>

<?php get_footer(); ?>

Here is the WordPress Contact-Form 7 Code :

[text* your-name placeholder "Name of teacher *"]
[text* school-name placeholder "Name of school *"]
[email* your-email placeholder "Email address"]
[tel* phone-number placeholder "Phone number"]

Potential date of visit:

[date* date-of-visit placeholder "Potential date of visit"]

Potential time of visit :

[select* time-of-visit include_blank "9:30PM " "10:30PM "
 "11:30PM " "12:30PM " "13:30PM " "14:30PM " "15:30PM " "16:30PM"]

Choose your session :

[select* taught-sessions class:session-choice 
   "KS1 - Classification " 
   "KS1 - Food chains and habitats " 
   "KS2 - Gerald Durrell " 
   "KS2 - Rainforest " 
   "KS2 - Teeth " 
   "KS3 - The Gerald Durrell Story " 
   "KS3 - The Gerald Durrell story " 
   "KS3 - Ethics illegal trade in wildlife" 
   "KS3 - Biodiversity and conservation explored " 
   "KS3* - Introduction to Durrell " 
   "KS3* - Animal observations** " 
   "KS4 - Animal observations** " 
   "KS4 - Ethics - Mountain chickens " 
   "KS4 - Biodiversity and conservation extended " 
   "KS4* - Microbiology in the workplace** " 
   "AS & A-LEVEL - Animal observations** " 
   "AS & A-LEVEL - Geography case study* "
 ]

For more information on sessions:

[textarea Additional-information maxlength:200 
  placeholder "Additional information... 
  e.g physical or learning difficulties"]

[submit "Submit"]

Answer 1

You have to be specific about your question. We can not answer your question just seeing your form. Where your are storing the data that which description is for which subject?

You can do something like that for example the drop down have

class="subject"

and you select any subject from this.

 sub1="MATH";
 SUB2="English";
 Desc1="MATH is Love";
 Desc2="English is important";

$(".subject").change(function()
     var sub= (this).val();
 if(sub== sub1)
   {
      $(".desc").html(Desc1);
   }
  else{
     $(".desc").html(Desc2);
   }
   });

desc is a class given to a div or input where you want to show description.