The form takes an image from another HTML form. What can be wrong?

Question

css

Hello! The site has two forms in each of which you can send a photo. Forms don't reload after submitting. When people send a photo from form - 1, and then send a photo from form -2, then this second form grabs a photo from the first form and sends two photos already. His own and from the first form. The same thing happens in reverse. That is, the forms do not understand that you need to send only your photos. How to separate them? Where to dig? In PHP and JS, I'm not strong, or rather, for me it's generally a dark forest. Help me please. I've been steaming for the second day. Thanks in advance
Form 1

<div class="modal-body" style="">
                <h3 class="mb-10 light" style="">Всем Магазинам<br>
Автозапчастей</h3>
                <p class="small mb-5 light" style="">Как это работает? Вы отправляете запрос по необходимым Вам критериям. На запрос отвечают удобным Вам способом, например WhatsApp или обычный звонок. В данный момент количество Магазинов Автозапчастей -<br>

</p><h3 class="">"98"</h3><p></p>
                <form action="./scripts/request.php" class="contact_form mb-0" id="popup-center-form-form" novalidate="novalidate" style="">
<div class="form-group select-group"><select class="form-control" name="select_0"><option value="Открытый запрос" selected="" disabled="">Открытый запрос</option><option value="Открытый запрос">Открытый запрос</option><option value="Запрос закрыт. Всем спасибо!">Запрос закрыт. Всем спасибо!</option></select></div><div class="form-group"><input type="text" class="form-control" placeholder="Ваш мобильный*" name="textfield_1" size="10"></div><p class="text txt-form">Укажите vin код. Либо марку, год и объем*</p><div class="form-group"><input type="text" class="form-control" placeholder="Введите модель автомобиля*" name="textfield_3" size="10"></div><div class="form-group"><input type="text" class="form-control" placeholder="Опишите запчасть*" name="textfield_4" size="10"></div><div class="form-group select-group"><select class="form-control" name="select_5"><option value="Новое или б/у?*" selected="" disabled="">Новое или б/у?*</option><option value="Новое ">Новое </option><option value="Б/У">Б/У</option><option value="Неважно">Неважно</option></select></div><p class="text txt-form">Загрузите фото если это необходимо</p><div class="form-group file-group"><label class="form-control" for="file_7"><span class="placeholder">Фото</span></label><input type="file" name="file_7" id="file_7" class="inputfile" data-multiple-caption="{count} files selected" multiple accept="image/*,image/jpeg,jpg,png"></div><div class="form-group select-group"><select class="form-control" name="select_8"><option value="Как получить ответ?" selected="" disabled="">Как получить ответ?</option><option value="Звонок">Звонок</option><option value="WhatsApp">WhatsApp</option><option value="Неважно">Неважно</option></select></div><div class="form-group"><textarea class="form-control" placeholder="" rows="4" name="textarea_9"></textarea></div><button type="submit" data-loading-text="••• Минуточку, отправляю" data-complete-text="Отправлено! Ожидайте" data-reset-text="Попробуйте позже..." class="btn btn-success btn-block" style=""><i class="icon-paper-plane icon-position-left icon-size-m"></i><span style=""><strong>Отправить запрос</strong></span></button>
                </form>
            </div>
            <div class="bg"></div>
          </div>
    </div>

Form 2

<section class="modal fade modal-confirm flex-center" id="popup-center-form--0" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content text-center light">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body" style="">
                <h3 style="" class="mb-5 light">Отправка всем СТО</h3>
                <p class="small mb-5 light" style="">Как это работает? Вы отправляете запрос по необходимым Вам критериям. На запрос отвечают удобным Вам способом, например WhatsApp или обычный звонок. В данный момент количество СТО -<br>

</p><h3 class="mt-0 light" style="">"44"</h3><p></p>
                <form action="./scripts/request.php" class="contact_form mb-0" id="popup-center-form--0-form" novalidate="novalidate" style="">
 <div class="form-group select-group"><select class="form-control" name="select_0"><option value="Открытый запрос" selected="" disabled="">Открытый запрос</option><option value="Открытый запрос">Открытый запрос</option><option value="Запрос закрыт. Всем спасибо!">Запрос закрыт. Всем спасибо!</option></select></div><div class="form-group"><input type="text" class="form-control" placeholder="Ваш мобильный*" name="textfield_1" size="10"></div><div class="form-group"><input type="text" class="form-control" placeholder="Введите модель автомобиля*" name="textfield_2" size="10"></div><div class="form-group"><textarea class="form-control" placeholder="Опишите необходимый ремонт*" rows="4" name="textarea_3"></textarea></div><p class="text txt-form">Загрузите фото если это необходимо</p><div class="form-group file-group"><label class="form-control" for="file_5"><span class="placeholder">Фото</span></label><input type="file" name="file_5" id="file_5" class="inputfile" data-multiple-caption="{count} files selected" multiple accept="image/*,image/jpeg,jpg,png"></div><div class="form-group select-group"><select class="form-control" name="select_6"><option value="Как получить ответ?" selected="" disabled="">Как получить ответ?</option><option value="Звонок">Звонок</option><option value="WhatsApp">WhatsApp</option><option value="Неважно">Неважно</option></select></div><div class="form-group"><textarea class="form-control" placeholder="Комментарий к запросу" rows="4" name="textarea_7"></textarea></div><button type="submit" data-loading-text="••• Минуточку, отправляю" data-complete-text="Отправлено! Ожидайте" data-reset-text="Попробуйте позже..." class="btn btn-success btn-block" style=""><i class="icon-paper-plane icon-position-left icon-size-m"></i><span style=""><strong>Отправить запрос</strong></span></button>
                </form>
            </div>
            <div class="bg"></div>
          </div>
    </div>

Answer 1

you shouldn't change the col-* classes directly. But adding another class to the markup and giving it the necessary properties is the norm. that is, in principle, done normally. But adaptability to your classes will need to be done by yourself.

Answer 2

Here is the PHP file

<?php
  //SEND Mail
  if (mail($mailto, $subject, $body, $headers)) {
    echo "mail send ... OK"; // or use booleans here
  } else {
    echo "mail send ... ERROR!";
    print_r( error_get_last() );
  }
}
if($_POST['id'] === "popup-center-form-form") {
  $mailto = "[email protected]";

  $data_array = json_decode($_POST['data']);
  $message = "";
  foreach ($data_array as $key => $value) {
    if (isset($value->name) && $value->name !== "") {
      $message .= $value->name.': '.$value->value.'<br>';
    }
  }

  $subject = "[email protected]";

  // a random hash will be necessary to send mixed content
  $separator = md5(time());

  // carriage return type (RFC)
  $eol = "\r\n";

  // main header (multipart mandatory)
  $headers = "From: $mailto" . $eol;
  $headers .= "Reply-To: $mailto" . $eol;
  $headers .= "MIME-Version: 1.0" . $eol;
  $headers .= "Content-Type: multipart/mixed; boundary=\"" . $separator . "\"" . $eol;
  $headers .= "Content-Transfer-Encoding: 7bit" . $eol;
  $headers .= "This is a MIME encoded message." . $eol;

  // message
  $body = "--" . $separator . $eol;
  $body .= "Content-Type: text/html; charset=utf-8" . $eol;
  $body .= "Content-Transfer-Encoding: 8bit" . $eol . $eol;
  $body .= "<div>" . $message . "</div>" . $eol . $eol;

  foreach( $_FILES as $file) {
    if ( !move_uploaded_file( $file['tmp_name'], dirname(__FILE__) . '/../tmp/' . $file['name'] ) ) {
      echo "error upload file: " . $file['name'];
      continue;
    }
    $filename = $file['name'];
    $path = dirname(__FILE__) . '/../tmp';
    $file = $path . "/" . $filename;

    $content = file_get_contents($file);
    $content = chunk_split(base64_encode($content));

    // attachment
    $body .= "--" . $separator . $eol;
    $body .= "Content-Type: application/octet-stream; name=\"" . $filename . "\"" . $eol;
    $body .= "Content-Transfer-Encoding: base64" . $eol;
    $body .= "Content-Disposition: attachment" . $eol;
    $body .= $content . $eol . $eol;
  }

  $body .= "--" . $separator . "--";

  //SEND Mail
  if (mail($mailto, $subject, $body, $headers)) {
    echo "mail send ... OK"; // or use booleans here
  } else {
    echo "mail send ... ERROR!";
    print_r( error_get_last() );
  }
}
if($_POST['id'] === "popup-center-form--0-form") {
  $mailto = "[email protected]";

  $data_array = json_decode($_POST['data']);
  $message = "";
  foreach ($data_array as $key => $value) {
    if (isset($value->name) && $value->name !== "") {
      $message .= $value->name.': '.$value->value.'<br>';
    }
  }

  $subject = "[email protected]";

  // a random hash will be necessary to send mixed content
  $separator = md5(time());

  // carriage return type (RFC)
  $eol = "\r\n";

  // main header (multipart mandatory)
  $headers = "From: $mailto" . $eol;
  $headers .= "Reply-To: $mailto" . $eol;
  $headers .= "MIME-Version: 1.0" . $eol;
  $headers .= "Content-Type: multipart/mixed; boundary=\"" . $separator . "\"" . $eol;
  $headers .= "Content-Transfer-Encoding: 7bit" . $eol;
  $headers .= "This is a MIME encoded message." . $eol;

  // message
  $body = "--" . $separator . $eol;
  $body .= "Content-Type: text/html; charset=utf-8" . $eol;
  $body .= "Content-Transfer-Encoding: 8bit" . $eol . $eol;
  $body .= "<div>" . $message . "</div>" . $eol . $eol;

  foreach( $_FILES as $file) {
    if ( !move_uploaded_file( $file['tmp_name'], dirname(__FILE__) . '/../tmp/' . $file['name'] ) ) {
      echo "error upload file: " . $file['name'];
      continue;
    }
    $filename = $file['name'];
    $path = dirname(__FILE__) . '/../tmp';
    $file = $path . "/" . $filename;

    $content = file_get_contents($file);
    $content = chunk_split(base64_encode($content));

    // attachment
    $body .= "--" . $separator . $eol;
    $body .= "Content-Type: application/octet-stream; name=\"file_5" . $filename . "\"file_5" . $eol;
    $body .= "Content-Transfer-Encoding: base64" . $eol;
    $body .= "Content-Disposition: attachment" . $eol;
    $body .= $content . $eol . $eol;
  }

  $body .= "--" . $separator . "--";

  //SEND Mail
  if (mail($mailto, $subject, $body, $headers)) {
    echo "mail send ... OK"; // or use booleans here
  } else {
    echo "mail send ... ERROR!";
    print_r( error_get_last() );
  }
}

Answer 3

// в оба обработчика формы онсубмит добавлено:
var $inputFiles = $('.inputfile');
// то есть ВСЕ инпуты с классом инпутфайл будут добавлены в отправляемые данные,
//независимо от того в какой части документа они находятся