Как показать элемент в div где была нажата кнопка

108

01 августа 2021, 00:20

<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Поле</title> 
 
  <link rel="stylesheet" type="text/css" href="css/normalize.css"> 
  <link rel="stylesheet" type="text/css" href="css/field.css"> 
  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700&display=swap&subset=cyrillic" rel="stylesheet"> 
</head> 
 
<body> 
 
  <button id="start">Start</button> 
 
 
 
 
 
 
  <div class="main"> 
    <div class="main_img"> 
      <img src="images/start-fild.png"> 
    </div> 
    <p class="your_fields"> 
      Ваши поля: <br> 
    </p> 
    <div id="2" class="main_description__filds"> 
      <p> 
 
        Статус: <br> Поле не обработано. <br> Нужно пахать.<br> 
      </p> 
      <p> 
        Название поля: Стартовое </p> 
      <p> 
        Номер поля: 2 </p> 
      <p> 
        Обьем поля: 1 гектар 
      </p> 
      <p> 
        <button id="2" name="vsh" class="btn" onclick="onStart('500');">Вспахать</button> 
      </p> 
      <p> 
        Стоимость 1 гектара поля 100 000 $<br> 
        <form method="post"> 
          <input type="hidden" name="field_id" value="2"> 
          <input type="number" name="size" class="form" placeholder="Сколько гектар?"><br> 
          <button name="expand" class="btn">Расширить поле</button> 
        </form> 
      </p> 
 
    </div> 
    <div id="6" class="main_description__filds"> 
      <p> 
 
        Статус: <br> Поле не обработано. <br> Нужно пахать.<br> 
      </p> 
      <p> 
        Название поля: Проверка </p> 
      <p> 
        Номер поля: 6 </p> 
      <p> 
        Обьем поля: 1 гектар 
      </p> 
      <p> 
        <button id="6" name="vsh" class="btn" onclick="onStart('500');">Вспахать</button> 
      </p> 
      <p> 
        Стоимость 1 гектара поля 100 000 $<br> 
        <form method="post"> 
          <input type="hidden" name="field_id" value="6"> 
          <input type="number" name="size" class="form" placeholder="Сколько гектар?"><br> 
          <button name="expand" class="btn">Расширить поле</button> 
        </form> 
      </p> 
 
    </div> 
    <span id="time"></span> 
    <button id="buy_field" class="btn">Купить поле</button> 
    <div class="expand" style="display: none;"> 
 
    </div> 
 
    <div class="main_registration"> 
      <a href="garage">гараж</a> 
    </div> 
    <div class="main_registration"> 
      <a href="storage">хранилище</a> 
    </div> 
    <div class="main_registration"> 
      <a href="square">площадь</a> 
    </div> 
    <div class="main_registration"> 
      <a href="mail">почта</a> 
    </div> 
    <div class="main_registration"> 
      <a href="profile?id=20">профиль</a> 
    </div> 
 
  </div> 
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 
  <script type="text/javascript" src="js/field.js"></script> 
  <script type="text/javascript" src="js/jquery.cookie.js"></script> 
  <script> 
    var newDate, 
      intervalId; 
    if (localStorage["timer"]) { 
      newDate = new Date(localStorage["timer"]); 
 
      timer(); // Инициализация текста в элементах. 
      intervalId = setInterval(timer, 1000); 
    } 
 
    function onStart(tm) { 
      newDate = Date.now() + 60 * tm; // Таймер на 60 минут 
      timer(); // Инициализация текста в элементах. 
      if (!intervalId) intervalId = setInterval(timer, 1000); 
      localStorage["timer"] = new Date(newDate).toISOString(); 
    } 
 
    function timer() { 
      var now = Date.now(), 
        rest = newDate >= now ? Math.round((newDate - now) / 1000) * 1000 : 0, 
        s = ""; 
      if (!rest) { 
        clearInterval(intervalId); 
        intervalId = null; 
        localStorage.removeItem("timer"); 
      } else { 
        var rest2 = rest % 3600000; 
        let hh = (rest - rest2) / 3600000; 
        rest = rest2; 
 
        rest2 = rest % 60000; 
        let mm = (rest - rest2) / 60000; 
        rest = rest2; 
 
        rest2 = rest % 1000; 
        let ss = (rest - rest2) / 1000; 
        let ms = rest2; 
 
        s = (hh < 10 ? "0" : "") + hh + ":" + 
          (mm < 10 ? "0" : "") + mm + ":" + 
          (ss < 10 ? "0" : "") + ss; 
      } 
      document.querySelector("#time").textContent = s; 
 
    } 
 
    $(document).ready(function() { 
      var $span = $('#time'); 
      var $button = $('.main_description__filds button.btn'); 
      $button.click(function() { 
        $.cookie('click', true); 
        var $comment = $(this).parent().parent(); 
        $comment.prepend($('#time').show()); 
      }); 
      if ($.cookie('click' == true && $span.text() != '')) { 
        var $comment = $('.main_description__filds button.btn').parent().parent(); 
        $comment.prepend($('#time').show()); 
      } 
    }); 
  </script> 
  <div class="main_copyright"> 
    <p> 
      Вы вошли как - фантом <br> Ваш баланс: 94063324$ <br> 
      <a href="logout.php">Выйти</a> 
    </p> 
  </div> 
  <div class="main_copyright"> 
    <p> 
      &copy; Все права защищены. <br> 
      <a href="#">адрес сайта игры</a> 
    </p> 
  </div> 
</body> 
 
</html>

Всем привет. В кратце: span id="time" мне нужно вставлять в div в котором была нажата кнопка. Div'ы и кнопки выводятся с бд циклом и таких дивов будет минимум 1, максимум 5. На данный момент все правильно отображается до перезагрузки страницы. После нее во всех дивах отображается этот спан и время таймера, чего не должно быть. Ребят, помогите, пожалуйста решить эту проблему. Мозг кипит уже.