Как запомнить значение атрибута data?

Вы убрали комментарий, что ссылок может быть много. Вот еще варианты в ответ:
Придется как-то выделять выбранный вариант.

Из идей -

$('.js-join').click(function() {
        let id = $(this).data('id');
        $('.js-join').removeClass('active'); //удаляем у всех ссылок класс active (ранее выбранных)
        $(this).addClass('active'); //добавляем выбранной ссылке класс active
        $.fancybox.open({
            src: '#modal-forum-join'
        });
        $('.js-modal-join').data('id', id);
    });
$('.js-modal-join').click(function() {
        alert($('.js-join.active').data('id'));
    });

другой вариант - если есть доступ к коду, формирующему цикл, то можно заменить на (список, в котором необходимо выбрать один вариант), сами круглые кнопки можно скрыть с помощью CSS, лишь бы были видны метки (по клику на выделяется соответствующий элемент списка, это стандартное поведение).

Пример кода html:

<input id="rad1" type="radio" name="rad"/><label for="rad1" data-id="1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2" data-id="2">Radio 2</label>

Тогда можно будет узнать, какой элемент выбран, таким селектором:

alert($('input[type="radio"]:checked+label').data('id')); //получаем id элемента label у выбранного пункта списка

Получение id непосредственно из тега (атрибут "id", а не "data-id"):

alert($('input[type="radio"]:checked').attr('id')); //получаем id элемента label у выбранного пункта списка