Synchronize product detail swatches

I have 3 sets of product swatches representing different measurements (I.E. EU UK US sizes) and each time a customer selects a swatch from one of the units (I.E. 42 EU) I want to auto-select the corresponding swatches (I.E. 8.5 US and 8 UK). Only the corresponding swatches remain enabled. I’ve extended the swatch-renderer.js with this but it does not work properly:

_OnClick: function ($this, $widget) {
            var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
                $wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
                $label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
                attributeId = $parent.attr('attribute-id'),
                $input = $parent.find('.' + $widget.options.classes.attributeInput),
                checkAdditionalData = JSON.parse(this.options.jsonSwatchConfig[attributeId]['additional_data']),
                $siblingSwatch = $parent.siblings(),
                selectedArray = [];

            if ($widget.inProductList) {
                $input = $widget.productForm.find(
                    '.' + $widget.options.classes.attributeInput + '[name="super_attribute[' + attributeId + ']"]'
                );
            }

            if ($this.hasClass('disabled')) {
                return;
            }

            if ($this.hasClass('selected')) {
                $parent.removeAttr('option-selected').find('.selected').removeClass('selected');
                $input.val('');
                $label.text('');
                $this.attr('aria-checked', false);
            } else {
                $parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');
                $label.text($this.attr('option-label'));
                $input.val($this.attr('option-id'));
                $input.attr('data-attr-name', this._getAttributeCodeById(attributeId));
                $this.addClass('selected');
                $widget._toggleCheckedAttributes($this, $wrapper);
            }

            $widget._Rebuild();

            if ($widget.element.parents($widget.options.selectorProduct)
                .find(this.options.selectorProductPrice).is(':data(mage-priceBox)')
            ) {
                $widget._UpdatePrice();
            }

            $(document).trigger('updateMsrpPriceBlock',
                [
                    _.findKey($widget.options.jsonConfig.index, $widget.options.jsonConfig.defaultValues),
                    $widget.options.jsonConfig.optionPrices
                ]);

            if (parseInt(checkAdditionalData['update_product_preview_image'], 10) === 1) {
                $widget._loadMedia();
            }

            $input.trigger('change');

            if (2 < $siblingSwatch.andSelf().length) {
                if ($this.hasClass('selected')) {
                    //reset siblings swatches if any selected
                    $siblingSwatch.find('.selected').each(function() {
                        const $siblingParent = $(this).parents('.swatch-attribute');
                        $siblingParent.removeAttr('option-selected').find('.selected').removeClass('selected');
                        $siblingParent.find('.swatch-input').val('');
                        $siblingParent.find('.swatch-attribute-selected-option').text('');
                        $(this).attr('aria-checked', false);
                    });
                    //select siblings swatches
                    $siblingSwatch.find('.swatch-option').each(function() {
                        var $thisX = $(this);
                        if (!$thisX.hasClass('disabled')){
                            var $parentX = $thisX.parents('.' + $widget.options.classes.attributeClass),
                                $wrapperX = $thisX.parents('.' + $widget.options.classes.attributeOptionsWrapper),
                                $labelX = $parentX.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
                                attributeIdX = $parentX.attr('attribute-id'),
                                $inputX = $parentX.find('.' + $widget.options.classes.attributeInputX);

                            $parentX.attr('option-selected', $thisX.attr('option-id')).find('.selected').removeClass('selected');
                            $labelX.text($thisX.attr('option-label'));
                            $inputX.val($thisX.attr('option-id'));
                            $inputX.attr('data-attr-name', $widget._getAttributeCodeById(attributeIdX));
                            $thisX.addClass('selected');
                            $widget._toggleCheckedAttributes($thisX, $wrapperX);
                        }
                    });
                } else {
                    $siblingSwatch.find('.selected').each(function() {
                        const $siblingParent = $(this).parents('.swatch-attribute');
                        $siblingParent.removeAttr('option-selected').find('.selected').removeClass('selected');
                        $siblingParent.find('.swatch-input').val('');
                        $siblingParent.find('.swatch-attribute-selected-option').text('');
                        $(this).attr('aria-checked', false);
                    });
                }
            }

        },