On every click, you can reset the active class before setting to any of the generic_content divs, and reset the selected option as well.

Here’s an example with your HTML and basic CSS (View in full page):

$(function() {
  $('.generic_content').click(function() {
  
    $(".active").removeClass("active")
    $(this).addClass("active")
    
    $("#paymentplanOverview option").removeAttr("selected");
    $("#paymentplanOverview option:contains(" + $(this).prop("id") + ")").attr("selected", true);
    
  })
})

.generic_content.active {
  outline: 1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" id="generic_price_table">
  <section>
    <div class="container">
      <div class="row">

        <div class="col-md-4">
          <div class="generic_content clearfix" id="Monthly">
            <div class="generic_head_price clearfix">

              <div class="generic_head_content clearfix">
                <div class="head_bg"></div>
                <div class="head">
                  <span>Monthly</span>
                </div>
              </div>
              <div class="generic_price_tag clearfix">
                <span class="price">
                                        <span class="sign">EURO</span>
                <span class="currency">144</span>
                <span class="cent"></span>
                <span class="month">/MON</span>
                </span>
              </div>
            </div>
            <div class="generic_feature_list">
              <ul>
                <li><span>15+</span> Videos</li>
                <li><span></span> Teachers</li>
                <li><span>20+</span> Discount codes</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="generic_content clearfix" id="Yearly">
            <div class="generic_head_price clearfix">
              <div class="generic_head_content clearfix">
                <div class="head_bg"></div>
                <div class="head">
                  <span>Yearly</span>
                </div>
              </div>
              <div class="generic_price_tag clearfix">
                <span class="price">
                                        <span class="sign">EURO</span>
                <span class="currency">99</span>
                <span class="cent">.99</span>
                <span class="month">/MON</span>

                </span>
              </div>
            </div>
            <div class="generic_feature_list">
              <ul>
                <li><span>15+</span> Videos</li>
                <li><span></span> Teachers</li>
                <li><span>20+</span> Discount codes</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="generic_content clearfix" id="3-Month">
            <div class="generic_head_price clearfix">
              <div class="generic_head_content clearfix">
                <div class="head_bg"></div>
                <div class="head">
                  <span>3-Month</span>
                </div>
              </div>
              <div class="generic_price_tag clearfix">
                <span class="price">
                                        <span class="sign">EURO</span>
                <span class="currency">129</span>
                <span class="cent"></span>
                <span class="month">/MD.</span>
                </span>
              </div>
            </div>
            <div class="generic_feature_list">
              <ul>
                <li><span>15+</span> Videos</li>
                <li><span></span> Teachers</li>
                <li><span>20+</span> Discount codes</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="form-group row">
    <label for="paymentplanOverview" class="col-sm-3 col-form-label col-form-label-sm fs-subtitle">Payment Plan</label>
    <div class="col-sm-9">
      <select name="paymentplanOverview" class="col-sm-12" id="paymentplanOverview" required>
        <option value=""></option>
        <option value="1">Monthly</option>
        <option value="3">3-Month</option>
        <option value="12">Yearly</option>
      </select>
    </div>
  </div>
</div>

I have 3 ‘subscription cards’ as a choice to the user. I am having difficulties achieving the following:

When the user selects one of the ‘cards’, the id of the selected element has to be transitioned/picked dynamically from a dropdown list with already existing values which are the same as the ids of the ‘cards’.

The ‘cards’:

 <div id="generic_price_table">   
        <section>
            <div class="container">
                <div class="row">

                    <div class="col-md-4">
                        <div class="generic_content clearfix" id="Monthly">
                            <div class="generic_head_price clearfix">

                                <div class="generic_head_content clearfix">
                                    <div class="head_bg"></div>
                                    <div class="head">
                                        <span>Monthly</span>
                                    </div>
                                </div>
                                <div class="generic_price_tag clearfix">    
                                    <span class="price">
                                        <span class="sign">EURO</span>
                                        <span class="currency">144</span>
                                        <span class="cent"></span>
                                        <span class="month">/MON</span>
                                    </span>
                                </div>
                            </div>                            
                            <div class="generic_feature_list">
                                <ul>
                                    <li><span>15+</span> Videos</li>
                                    <li><span></span> Teachers</li>
                                    <li><span>20+</span> Discount codes</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="generic_content clearfix" id="Yearly">
                            <div class="generic_head_price clearfix">
                                <div class="generic_head_content clearfix">
                                    <div class="head_bg"></div>
                                    <div class="head">
                                        <span>Yearly</span>
                                    </div>
                                </div>
                                <div class="generic_price_tag clearfix">    
                                    <span class="price">
                                        <span class="sign">EURO</span>
                                        <span class="currency">99</span>
                                        <span class="cent">.99</span>
                                        <span class="month">/MON</span>

                                    </span>
                                </div>
                            </div>                            
                            <div class="generic_feature_list">
                                <ul>
                                    <li><span>15+</span> Videos</li>
                                    <li><span></span> Teachers</li>
                                    <li><span>20+</span> Discount codes</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="generic_content clearfix" id="3-Month">
                            <div class="generic_head_price clearfix">
                                <div class="generic_head_content clearfix">
                                    <div class="head_bg"></div>
                                    <div class="head">
                                        <span>3-Month</span>
                                    </div>
                                </div>
                                <div class="generic_price_tag clearfix">    
                                    <span class="price">
                                        <span class="sign">EURO</span>
                                        <span class="currency">129</span>
                                        <span class="cent"></span>
                                        <span class="month">/MD.</span>
                                    </span>
                                </div>
                            </div>                            
                            <div class="generic_feature_list">
                                <ul>
                                    <li><span>15+</span> Videos</li>
                                    <li><span></span> Teachers</li>
                                    <li><span>20+</span> Discount codes</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
        </section>             
        </div>

The dropdown:

 <div class="form-group row">
       <label for="paymentplanOverview" class="col-sm-3 col-form-label col-form-label-sm fs-subtitle">Payment Plan</label>
       <div class="col-sm-9">
            <select name="paymentplanOverview" class="col-sm-12" id="paymentplanOverview" requred>
                    <option></option>
                    <option value="1">Monthly</option>
                    <option value="3">3-Month</option>
                    <option value="12">Yearly</option>
            </select>
       </div>
 </div>

And the JQuery I have for toggling class active:

$(function(){
        $('.generic_content').click(function(){
            $('.generic_content').not(this).removeClass('active');    
            $(this).toggleClass('active');      
        });
});

I tried this and it doesnt seem to work:

$(function(){
        $('.generic_content').click(function(){
            $('.generic_content').not(this).removeClass('active');    
            $(this).toggleClass('active');

            var x = document.activeElement.id;
            var x2 = document.getElementById("paymentplanOverview");

            $('[name=paymentplanOverview] option').filter(function() { 
                return ($(this).text() == x);
            }).prop('selected', true);

        });
});