clone 1 row of divs with another on click

I have 2 rows. Each row has 3 individual DIVs that can be selected (Clicked) by the user. When the the user clicks on any of the DIVs on the first row, there is styling in CSS to change the colour of the individual DIV (column if you like) I would like the corresponding DIV (column) in the 2nd row of DIVs to show as selected too.

    <div class="col-sm-4 my-1">
      <div class="card pricecard aircraft active h-100">
        <div class="card-body">
          <span class="price">£20,944</span></p>
        </div>
      </div>
    </div>
    <div class="col-sm-4 my-1">
      <div class="card pricecard aircraft h-100">
        <div class="card-body">
          <span class="price2">£20,944</span></p>
        </div>
      </div>
    </div>
    <div class="col-sm-4 my-1">
      <div class="card pricecard aircraft h-100">
        <div class="card-body">
          <span class="price3">£20,944</span></p>
        </div>
      </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 my-1">
      <div class="card pricecard time active h-100">
        <div class="card-body">
          <span class="time">13:00</span></p>
        </div>
      </div>
    </div>
    <div class="col-sm-4 my-1">
      <div class="card pricecard time h-100">
        <div class="card-body">
          <span class="time2">15:00</span></p>
        </div>
      </div>
    </div>
    <div class="col-sm-4 my-1">
      <div class="card pricecard time h-100">
        <div class="card-body">
          <span class="time3">18:00</span></p>
        </div>
      </div>
    </div>
</div>

jquery-

let $divs = $('.pricecard.aircraft').click(function() {
    $divs.not(this).removeClass('active');
    $(this).toggleClass('active');
});

fiddle – https://jsfiddle.net/f9Lc0yjk/

Answer

I think a solution would be to use jQuery .index() to get a column number.

Since the elements you target are in some div.col-*, you have to check for the index of the parent.

Then, having a column number, you can target the relevant elements on the other rows.

$('.pricecard').click(function() {
  
  // Get the parent's index of the clicked one
  let columnNum = $(this).parent().index()

  // For each...
  $('.pricecard').each(function() {
  
    // Add the class if the parent's index is the same as the clicked one
    $(this).toggleClass('active', ($(this).parent().index() === columnNum));
  })
});

.active {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  <div class="col-sm-4 my-1">
    <div class="card pricecard aircraft active h-100">
      <div class="card-body">
        <span class="price">£20,944</span>
      </div>
    </div>
  </div>
  <div class="col-sm-4 my-1">
    <div class="card pricecard aircraft h-100">
      <div class="card-body">
        <span class="price2">£20,944</span>
      </div>
    </div>
  </div>
  <div class="col-sm-4 my-1">
    <div class="card pricecard aircraft h-100">
      <div class="card-body">
        <span class="price3">£20,944</span>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-4 my-1">
    <div class="card pricecard time active h-100">
      <div class="card-body">
        <span class="time">13:00</span>
      </div>
    </div>
  </div>
  <div class="col-sm-4 my-1">
    <div class="card pricecard time h-100">
      <div class="card-body">
        <span class="time2">15:00</span>
      </div>
    </div>
  </div>
  <div class="col-sm-4 my-1">
    <div class="card pricecard time h-100">
      <div class="card-body">
        <span class="time3">18:00</span>
      </div>
    </div>
  </div>
</div>

Advertisement

Answer