Adjust selectors in RuleCollectionBuilder to use plain js

Author: guerler

client/src/components/RuleCollectionBuilder.vue

@@ -1836,16 +1836,16 @@ export default {
             return { data, sources };
         },
         highlightColumn(n) {
-            const headerSelection = $(`.htCore > thead > tr > th:nth-child(${n + 1})`);
-            headerSelection.addClass("ht__highlight");
-            const bodySelection = $(`.htCore > tbody > tr > td:nth-child(${n + 1})`);
-            bodySelection.addClass("rule-highlight");
+            const headerSelection = document.querySelectorAll(`.htCore > thead > tr > th:nth-child(${n + 1})`);
+            headerSelection.forEach(el => el.classList.add("ht__highlight"));
+            const bodySelection = document.querySelectorAll(`.htCore > tbody > tr > td:nth-child(${n + 1})`);
+            bodySelection.forEach(el => el.classList.add("rule-highlight"));
         },
         unhighlightColumn(n) {
-            const headerSelection = $(`.htCore > thead > tr > th:nth-child(${n + 1})`);
-            headerSelection.removeClass("ht__highlight");
-            const bodySelection = $(`.htCore > tbody > tr > td:nth-child(${n + 1})`);
-            bodySelection.removeClass("rule-highlight");
+            const headerSelection = document.querySelectorAll(`.htCore > thead > tr > th:nth-child(${n + 1})`);
+            headerSelection.forEach(el => el.classList.remove("ht__highlight"));
+            const bodySelection = document.querySelectorAll(`.htCore > tbody > tr > td:nth-child(${n + 1})`);
+            bodySelection.forEach(el => el.classList.remove("rule-highlight"));
         },
         _datasetFor(dataIndex, data, mappingAsDict) {
             const res = {};