Simplify Twig/JS loop code

Question

Can any help simplify this js/twig code? The code links to some tabs that show floorplans of the property being sold. The specified aria-controls refers to a supertable field called floorLevel that has the loop.index included, so for example if I put [aria-controls='{{ row.floorLevel }}{{ loop.index }}'] it would output those names. I got it working so that when the user clicks on the tab it also changes the separate information about the measurements, but I couldn’t find of a less manual way of doing it, but I’m sure there must be an easier way?

{% includejs %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='groundFloor1']" ).on( "click", function() {
  $( "#dimsTarget1" ).addClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='firstFloor2']" ).on( "click", function() {
  $( "#dimsTarget2" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='secondFloor3']" ).on( "click", function() {
  $( "#dimsTarget3" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='thirdFloor4']" ).on( "click", function() {
  $( "#dimsTarget4" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='basement5']" ).on( "click", function() {
  $( "#dimsTarget5" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
});
{% endfor %}
{% endincludejs %}

Answer 1

You can select elements by class and give your html elements custom data attributes.

When this is your clickable html element with the corresponding div

<button data-id="dimsTarget4" class="myButton">
<div class="myContainer" id="dimsTarget4"></div>

Your jquery could be

$('.myButton').click(function(){
    var containerId = $(this).data('id');
    $('.myContainer').removeClass( "is-active" );
    $('#'+containerId).addClass( "is-active" );
})

And that's basically it. You'll remove the class from all your divs and add it to the one specified in your data-id attribute.

You won't need any twig elements in your JavaScript (which is much better) and define everything in your twig template. That way your Javascript will behave independently. When you change your html you won't need to change your Javascript that much and you can reuse the code

Note: I just used the button as an example. You can insert whatever class name or html element you like. Since you didn't mention the structure of your html I decided to use a button