Use JQuery addClass and removeClass

static/js/consos.js

@@ -24,9 +24,8 @@ $(document).ready(function() {
     });
 
     // Switching in double consumptions mode should update the layout
-    let double_conso_obj = $("#double_conso");
-    double_conso_obj.click(function() {
-        $("#consos_list_div").attr('class', 'col-xl-5');
+    $("#double_conso").click(function() {
+        $("#consos_list_div").removeClass('d-none');
         $("#infos_div").attr('class', 'col-sm-5 col-xl-6');
         $("#note_infos_div").attr('class', 'col-xl-3');
         $("#user_select_div").attr('class', 'col-xl-4');
@@ -44,9 +43,8 @@ $(document).ready(function() {
         }
     });
 
-    let single_conso_obj = $("#single_conso");
-    single_conso_obj.click(function() {
-        $("#consos_list_div").attr('class', 'col-xl-5 d-none');
+    $("#single_conso").click(function() {
+        $("#consos_list_div").addClass('d-none');
         $("#infos_div").attr('class', 'col-sm-5 col-md-4');
         $("#note_infos_div").attr('class', 'col-xl-5');
         $("#user_select_div").attr('class', 'col-xl-7');
@@ -69,10 +67,8 @@ $(document).ready(function() {
         }
     });
 
-    // Ensure we begin in single consumption. Removing these lines may cause problems when reloading.
-    single_conso_obj.prop('checked', 'true');
-    double_conso_obj.removeAttr('checked');
-    $("label[for='double_conso']").attr('class', 'btn btn-sm btn-outline-primary');
+    // Ensure we begin in single consumption. Fix issue with TurboLinks and BootstrapJS
+    $("label[for='double_conso']").removeClass('active');
 
     $("#consume_all").click(consumeAll);
 });