How to pass value to global variable on click?

Question

JavaScript

Site on Bitrix. The bitrix:catalog.section component displays a list of products with links to a detailed description:

<a href="ссылка1" class="link">Артикул1</a>
<a href="ссылка2" class="link">Артикул2</a>
<a href="ссылка3" class="link">Артикул3</a>
<a href="ссылка4" class="link">Артикул4</a>

You need to add a button in the card of each product, on click of which the link to the product is transferred to the global variable 'nameproduct'.
The button is like this:

<a href="#" class="button-yellow js-link-form" data-id="#call-modal">Предложить цену</a>

When this button is clicked, a modal window of the bitrix:main.feedback feedback form opens, in the text field of which the value of the global variable is inserted.
Tell me how to do it?
Here is the code for displaying goods in bitrix:catalog.section

<div class="items">
    <?foreach($arResult["ITEMS"] as $cell=>$arElement):?>
    <?
    $this->AddEditAction($arElement['ID'], $arElement['EDIT_LINK'], CIBlock::GetArrayByID($arParams["IBLOCK_ID"], "ELEMENT_EDIT"));
    $this->AddDeleteAction($arElement['ID'], $arElement['DELETE_LINK'], CIBlock::GetArrayByID($arParams["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BCS_ELEMENT_DELETE_CONFIRM')));
    ?>
    <div class="item">
          <a href='<?=$arElement["DETAIL_PAGE_URL"]?>'>
          <div class="image">
          <?if(count($arElement["PREVIEW_PICTURE"])>0):?>
          <img src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>" />
          <?else:?>
          <img src="/images/no_photo.png" alt="" />
          <?endif?>
          </div></a>
      <div style="text-align:center;">
        <a href="<?=$arElement["DETAIL_PAGE_URL"]?>" class="link"><?=$arElement["DISPLAY_PROPERTIES"]["ARTIKUL"]["DISPLAY_VALUE"]?></a>
          <?if($arElement["CATALOG_QUANTITY"]>0):?>
        <span class="price"><?=$arElement["PRICES"]["Для покупателей из интернет-магазина"]["PRINT_VALUE"]?></span>
          <?endif;?>
  <!-- Кнопка Предложить цену -->	
<a href="#" class="button-yellow js-link-form" data-id="#call-modal">Предложить цену</a>
      </div>
    </div>
    <?endforeach; // foreach($arResult["ITEMS"] as $arElement):?>
</div>

Here is the bitrix:main.feedback code:

<? if(!defined("B_PROLOG_INCLUDED")||B_PROLOG_INCLUDED!==true)die(); ?>
<div class="mfeedback">
<?if(!empty($arResult["ERROR_MESSAGE"]))
{
  foreach($arResult["ERROR_MESSAGE"] as $v)
    ShowError($v);
}
if(strlen($arResult["OK_MESSAGE"]) > 0)
{
  ?><div class="mf-ok-text"><?=$arResult["OK_MESSAGE"]?></div><?
}
?>

<form action="<?=POST_FORM_ACTION_URI?>" method="POST">
<?=bitrix_sessid_post()?>
  <div class="mf-cost">
 		<div class="mf-text">
  			<?=GetMessage("MFT_COST")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("COST", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?>
 		</div>
    <input type="text" name="cost" value="<?=$arResult["COST"]?>">
  </div>
  <div class="mf-name">
    <div class="mf-text">
      <?=GetMessage("MFT_NAME")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("NAME", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?>
    </div>
    <input type="text" name="user_name" value="<?=$arResult["AUTHOR_NAME"]?>">
  </div>
  <div class="mf-email">
    <div class="mf-text">
      <?=GetMessage("MFT_EMAIL")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("EMAIL", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?>
    </div>
    <input type="text" name="user_email" value="<?=$arResult["AUTHOR_EMAIL"]?>">
  </div>
  <div class="mf-tel">
 		<div class="mf-text">
  			<?=GetMessage("MFT_TEL")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("TEL", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?>
 		</div>
    <input type="text" name="tel" value="<?=$arResult["TEL"]?>">
  </div>
  <div class="mf-town">
 		<div class="mf-text">
  			<?=GetMessage("MFT_TOWN")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("TOWN", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?>
 		</div>
    <input type="text" name="town" value="<?=$arResult["TOWN"]?>">
  </div>
<!-- Здесь должно вставляться значение глобальной переменной nametovar -->
  <textarea style="display:none;" name="MESSAGE" rows="5" cols="40" readonly><?=$arResult["MESSAGE"]?><?=$GLOBALS['nametovar']?></textarea>
  

  <?if($arParams["USE_CAPTCHA"] == "Y"):?>
  <div class="mf-captcha">
    <div class="mf-text"><?=GetMessage("MFT_CAPTCHA")?></div>
    <input type="hidden" name="captcha_sid" value="<?=$arResult["capCode"]?>">
    <img src="/bitrix/tools/captcha.php?captcha_sid=<?=$arResult["capCode"]?>" width="180" height="40" alt="CAPTCHA">
    <div class="mf-text"><?=GetMessage("MFT_CAPTCHA_CODE")?><span class="mf-req">*</span></div>
    <input type="text" name="captcha_word" size="30" maxlength="50" value="">
  </div>
  <?endif;?>
  <input type="hidden" name="PARAMS_HASH" value="<?=$arResult["PARAMS_HASH"]?>">
  <input type="submit" name="submit" value="<?=GetMessage("MFT_SUBMIT")?>">
</form>
</div>
<script type="text/javascript">
var modal = (function(){
    var $overlay = $(".overlay"),
        $modal = $('#callback-modal');
    return {
      open: function(evt) {
        evt.preventDefault();
        $modal.fadeIn();
        $overlay.fadeIn();
      },
      hide: function(evt) {
        $modal.fadeOut();
        $overlay.fadeOut();
      } 
    }
  })();
  $(".js-link-form").on("click" , modal.open);
  $(".overlay").on("click", modal.hide);
</script>

Answer 1

send an ajax request to the server and set the global variable there.
although, of course, it is better not to use global variables

Answer 2

In the definition of the modal.open method, add the search for the required link, which, one element from the js-link-form button, is located in the product card block. Then read the attribute and insert it in the right place. Searching the tree using the jquery closest() and children() methods, you can look for others - there are many.