Динамически получить фоновое изображение элемента, который является дочерним элементом активного класса, который постоянно меняется

Question

Я работаю над вкладкой. Вкладка имеет перекрытие взаимодействия. Каждый элемент табуляции имеет класс с именем «global-tab-1». Внутри каждого элемента вкладки есть div. Я устанавливаю фоновое изображение для каждого элемента div с идентификатором.

Теперь я хочу, чтобы, когда у класса global-tab-1 был класс w - tab-active, я хотел получить фоновое изображение внутреннего элемента div и сохранить его в переменной. Когда я получаю URL-адрес изображения bg, я хочу установить это изображение в качестве фонового изображения для класса «global-tab-1».

Теперь, когда я все делаю правильно, но есть проблема. Скажем, вкладка 1 имеет класс w - tab-active. Таким образом, код принесет фоновое изображение div внутри элемента tab 1. Но когда вкладка 2 имеет класс w - tab-active, она не переносит фоновое изображение div внутри вкладки 2.

Как я могу установить фоновое изображение для класса 'global-tab-1' послеполучить фоновое изображение. Активный класс изменяется, но я не получаю фоновое изображение элемента div внутри класса w - tab-active. Вы можете увидеть демо по следующей ссылке https://tab -devries-demo.webflow.io /

Вот код, который я использовал. Это приносит фоновое изображение div внутри класса 'w-tab-active'. Но оно не обновляет изображение при изменении класса w-tab-active между элементами табуляции.

$(document).ready(function(){

    bg = $(".w--tab-active div").css("background-image")
    bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
    console.log(bg);

    $('.global-tab-1').css('background-image', 'url(' + bg + ')');

  });

$(document).ready(function(){

    bg = $(".w--tab-active div").css("background-image")
    bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
    console.log(bg);

    $('.global-tab-1').css('background-image', 'url(' + bg + ')');

  });