Разбираюсь с JS контекстом?

Question

[greedy_wizard]

Есть несколько секций с товаром
по нажатию на кнопку "сделать заказ" у определенного товара нужно чтобы открывалось форма "cd-popup" и отправлялась на почту название выбраного товара имя и телефон через обработчик mail.php Всё работает правильно для одного товара.
А вот вопрос заключается в том чтобы для каждого товара открывалось один и тот же попап но пробрасывалось динамически название товара в div "title" в форме и отправлялось на почту- название выбранного товара и имя и телефон вот сам сайт https://test.andygroove.com/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="block3 ultrablack">
        <div class="wrap">
            <h2>мужская куртка <span>UGOS ULTRA BLACK [1]</span></h2>
            <ul class="char">
                <li><b>Материал:</b> 100% полиэстер</li>
                <li><b>Цвет:</b> Черный</li>
            </ul>
            <div class="gallery">
                <div><img src="img/ultrablack/1.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultrablack/2.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultrablack/3.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultrablack/4.jpg" alt="Осенние куртки европейского производства"></div>
            </div>
            <div><img src="img/sizeprice.png" class="priceimg" alt="Размеры и цена"></div>
            <a href="#0" class="button-m scrollTo button-send">сделать заказ</a>
        </div>
    </section>
    <section class="block4 ultrablue">
        <div class="wrap">
            <h2>Мужская куртка <span>UGOS ULTRA BLUE [2]</span></h2>
            <ul class="char">
                <li><b>Материал:</b> 100% полиэстер</li>
                <li><b>Цвет:</b> Синий</li>

            </ul>
            <div class="gallery leftside">
                <div><img src="img/ultrablue/1.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultrablue/2.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultrablue/3.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultrablue/4.jpg" alt="Осенние куртки европейского производства"></div>
            </div>
            <div><img src="img/sizeprice.png" class="priceimg" alt="Размеры и цена"></div>
            <a href="#0" class="button-m scrollTo">сделать заказ</a>
        </div>
    </section>
    <section class="block3 ultragray">
        <div class="wrap">
            <h2>мужская куртка <span>UGOS ULTRA GRAY [3]</span></h2>
            <ul class="char">
                <li><b>Материал:</b> 100% полиэстер</li>
                <li><b>Цвет:</b> Серый</li>
            </ul>
            <div class="gallery">
                <div><img src="img/ultragray/1.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultragray/2.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultragray/3.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultragray/4.jpg" alt="Осенние куртки европейского производства"></div>
            </div>
            <div><img src="img/sizeprice.png" class="priceimg" alt="Размеры и цена"></div>
            <a href="#0" class="button-m scrollTo button-send">сделать заказ</a>
        </div>
    </section>
    <section class="block4 ultrahaki">
        <div class="wrap">
            <h2>Мужская куртка <span>UGOS ULTRA HAKI [4]</span></h2>
            <ul class="char">
                <li><b>Материал:</b> 100% полиэстер</li>
                <li><b>Цвет:</b> Хаки</li>

            </ul>
            <div class="gallery leftside">
                <div><img src="img/ultrahaki/1.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultrahaki/2.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultrahaki/3.jpg" alt="Осенние куртки европейского производства"></div>
                <div><img src="img/ultrahaki/4.jpg" alt="Осенние куртки европейского производства"></div>
            </div>
            <div><img src="img/sizeprice.png" class="priceimg" alt="Размеры и цена"></div>
            <a href="#0" class="button-m scrollTo button-send">сделать заказ</a>
        </div>
    </section>


        
        
        
        <div class="cd-popup" role="alert">
            <div class="cd-popup-container">
                <form id="ajax_form" class="main-order-form m1-form al-form" action="" method="post"
                    enctype="multipart/form-data">
                    <input type="hidden" id="mail" value="https://test.andygroove.com/php/mail.php" />
                    <div class="title"> UGOS ULTRA BLACK [1]</div>
                    <input name="name" id="name" class="form_input field" type="text" maxlength="12"
                        placeholder="Введите ваше имя" required="" value="" />
                    <input name="phone" id="phone1" class="form_input field" type="tel" maxlength="12" required=""
                        placeholder="+38 (___) __-__-___" value="" />
                    <input type="button" name="next" class="button-m sendMail" id="sendMail"
                        value="Оформить заказ" />
                    <div id="result_form"></div>
                </form>
                <a href="#0" class="cd-popup-close img-replace"></a>
            </div> <!-- cd-popup-container -->
        </div>

$(document).ready(function(){

  function sendMail() {
    $("#result_form").fadeIn(500);

    var formData = new FormData(document.getElementById("ajax_form"));
    $.ajax({
      type: "POST",
      url: $("#mail").val(),
      cache: false,
      data: formData,
      processData: false,
      contentType: false,
      error: function () {
        $("#result_form").html("Произошла ошибка! Повторите ещё раз");
      },
      beforeSend: function () {
        $("#result_form").html("Отправляем данные...");
        $("#sendMail").prop("disable", true);
      },
      success: function (result) {
        $("#result_form").html(result);
        $("#sendMail").prop("disable", false);
        $("#ajax_form").trigger("reset");
      },
    });
    return false;
  }
  // SEND MAIL
  $(".sendMail").click(function () {
    if ($("#name").val() === "") {
      return false;
    } else if ($("#phone1").val() === ""){
        return false;
    }else {
      sendMail();
    }
  });
  $(".sendMail").click(function () {
    var current_fs = $(this).parent();
    //check empty required inputs

    if (!check(current_fs)) {
      return false;
    }
  });

  function check(block) {
    let inputs = block.find("input[required]");
    result = true;
    if (inputs?.length) {
      inputs.each(function (i) {
        if (this.value == "" || (this.type == "checkbox" && !this.checked)) {
          result = false;
          if (this.type == "checkbox") {
            this.style.outline = "1px solid red";
          } else {
            this.style.border = "1px solid red";
          }
        } else {
          this.style.border = "none";
          this.style.outline = "none";
        }
      });
    }
    return result;
  };

  $(".button-send").on("click", function (event) {
    event.preventDefault();
    $(".cd-popup").addClass("is-visible");
    $("body").css("overflow","hidden");
    // return product title
    let product_title = $(".product_title").text();
        $('.popup_title').text(product_title);
        $('.product_title_input').attr("value", product_title);
  });

  //close popup
  $(".cd-popup").on("click", function (event) {
    if (
      $(event.target).is(".cd-popup-close") ||
      $(event.target).is(".cd-popup")
    ) {
      event.preventDefault();
      $(this).removeClass("is-visible");
      $("body").css("overflow","auto");
    }
  });
  //close popup when clicking the esc keyboard button
  $(document).keyup(function (event) {
    if (event.which == "27") {
      $(".cd-popup").removeClass("is-visible");
    }
  });

Answer 1

[Pashok Doom]

$(".button-send").on("click", function (event) {
    event.preventDefault();
    $(".cd-popup").addClass("is-visible");
    $("body").css("overflow","hidden");
    
    var sect = $(this).closest('.wrap'),
    		title = sect.find('h2 span').text();
     
    $('.cd-popup .title').text(title);
    $('.cd-popup input[name="product_name"]').val(title);
  });

И добавь в форму скрытый инпут <input name="product_name" type="hidden"/> для передачи названия товара

Comments

[greedy_wizard]

спасибо большое обязательно попробую и отпишусь

[greedy_wizard]

спасибо большое разобрался на примере