How to target the correct container in jQuery? [duplicate]

Question

I am building a basic content switch in HTML. You click on this box it shows this box etc. I know how to target it by unique classes or ID's but I'm not too sure how to write it so it's looking for a class rather than specific identifier to make it future proof for new content to be added. I know it's something like .parent() or .next() but I just can't seem to identify what I should be using.

jQuery(document).ready(function($) {
  $(".course_1").click(function() {
    $(".course_details_1").show();
    $(".course_details_2").hide();
    $(".course_details_3").hide();
  });
  $(".course_2").click(function() {
    $(".course_details_2").show();
    $(".course_details_1").hide();
    $(".course_details_3").hide();
  });
  $(".course_3").click(function() {
    $(".course_details_3").show();
    $(".course_details_2").hide();
    $(".course_details_1").hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='grid-x'>
  <div class='small-12 medium-12 large-6 cell courseBoxTitle'>
    <h4 class="marB24">Select a Course</h4>
    {% for course in courseList %}
    <div class='classBox course_{{ loop.index }} marB32'>
      <p class='h4 marB8'>{{ course.title }}</p>
      <p class='mar0 smallt'>{{ course.text }}</p>
    </div>
    {% endfor %}
  </div>
  <div class='small-12 medium-12 large-6 cell courseDetails'>
    {% for course in courseList %}
    <div class='courseDetailsWrap course_details_{{ loop.index }} marB32'>
      <p class='h4 mar40 courseTitle'>{{ course.title }} - <span class='smallt'>{{ course.text }}</span></p>

      <div class='details_one yellowbox marB32'>

        <div class='grid-x'>
          <div class='small-8 medium-8 large-8 cell'>
            <p class='h6 marB8'>{{ course.monthly_instalments }}</p>
            <p class='smallt mar0 detailstext'>{{ course.monthly_details }}</p>
          </div>
          <div class='small-5 medium-4 large-4 cell'>
            <div class='price h4'>{{ course.monthly_price }}/pm</div>
          </div>
        </div>

        <div class='details_two yellowbox'>
          <div class='grid-x'>
            <div class='small-8 medium-8 large-8 cell'>
              <p class='h6 marB16'>Payment in Full</p>
              <div class='discount h6'>{{ course.discount }}</div>
            </div>
            <div class='small-5 medium-4 large-4 cell'>
              <div class='price h4'>{{ course.full_price }}</div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>