Создание говнокода

[Artur_Hopf]

Подскажите пожалуйста как передать атрибут data грамотно

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="cont">
<div id="text">Текст</div><button id="button" data="445563">Кнопка</button><div id="numeral">123</div>
</div>
<script>
$("#button").click(function(){
        var data1 = $(this).prev().text();
        var data2 = $(this).next().text();
        var data = $(this).attr('data');
        console.log(data);
        alert(data1+data2);
});
</script>

Нужно передать атрибут data но чтоб пользователь его не видел.
Предполагается передать его, потом что то сделать с модальным окном(например ввести туда текст) и уже сказать - вставить этот текст в объект с таким data.
А гавнокод мой заключался в:

$("#button").click(function(){
        var data1 = $(this).prev().text();
        var data2 = $(this).next().text();
        var data = $(this).attr('data');
        govnocod (data);
});

function govnocod (data){
       alert(data1+data2);
       $(...).click(function(){
                 // по нажатию на кнопку в модальном окне передаем data и что ввели
       });

}

Но с такой функцией он запомнит data только один раз без перезагрузки страницы.

[рони]

Artur_Hopf,

[Artur_Hopf]

рони,

Постараюсь объяснить вопрос. Есть кнопка (одна из множества). У нее есть атрибут - идентификатор data="1334" (у всех кнопок он разный).
Жмем на кнопку, открывается окошко. Я поработал с этим окном, написал там что то( написал слово "Test"), жму ок. И мне нужно чтобы то что я написал, привязалась к этому артибуту, а точнее передалось в массив в виде:

array = {1334:'Test'};

Вот для наглядности написал как я сделал только без модального окна :

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="cont">
<div id="text">Текст</div><button id="button" data="445563">Кнопка</button><div id="numeral">123</div>
</div>
<div class="cont_2" hidden="true">
    <div id="name"></div>
    <textarea name="txtComment"></textarea>
    <button id="ok">Ок</button>
</div>
<script>
$("#button").click(function(){
        var data1 = $(this).prev().text();
        var data2 = $(this).next().text();
        var data = $(this).attr('data');
        $('.cont_2').find('#name').html('Название: '+ data1 +'<br>'+ 'номер:' + data2 );
        $('.cont_2').prop('hidden', false);
});
$("#ok").click(function(){
      var comment = $('textarea[name=txtComment]');
      alert(comment.val());
});
</script>

Вот чтоб по нажатию на кнопку "ОК" выходило и что введено, и атрибут data кнопки "Кнопка". Вот что я хотел спросить изначально

[ruslan_mart]

<button id="button" data-options='{"foo": "bar"}'>BUTTON</button>

<script>
button.onclick = function() {
    var options = JSON.parse(button.dataset.options);

    options[1334] = 'test';
    options.now = Date.now();
    options.randomNumber = Math.random();

    button.dataset.options = JSON.stringify(options);

    console.log(button);
};
</script>

[Artur_Hopf]

ruslan_mart,

если кнопок много, тоже получится?

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="cont">
<div id="text">Текст</div><button class="button" data="44455563">Кнопка</button><div id="numeral">123</div>
</div>
<div id="text">Другой</div><button class="button" data="468463">Кнопка</button><div id="numeral">143</div>
</div>
<div id="text">Вот этот</div><button class="button" data="4434445563">Кнопка</button><div id="numeral">133</div>
</div>
<div id="text">Этот тоже</div><button class="button" data="423463">Кнопка</button><div id="numeral">223</div>
</div>
<div class="cont_2" hidden="true">
    <div id="name"></div>
    <textarea name="txtComment"></textarea>
    <button id="ok">Ок</button>
</div>
<script>
$(".button").click(function(){
        var data1 = $(this).prev().text();
        var data2 = $(this).next().text();
        var data = $(this).attr('data');
        $('.cont_2').find('#name').html('Название: '+ data1 +'<br>'+ 'номер:' + data2 );
        $('.cont_2').prop('hidden', false);
});
$("#ok").click(function(){
      var comment = $('textarea[name=txtComment]');
      alert(comment.val());
});
</script>

Чтобы изменение вернулось именно на ту кнопку которая нажата была

[Artur_Hopf]

рони,
ruslan_mart,
Всем спасибо, говнокод заработал

[рони]

Artur_Hopf,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .cont_2{
      display: none;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
var arr = [], text = "", info = [], add;
$(".cont button").click(function(){
        var data1 = $(this).prev().text();
        var data2 = $(this).next().text();
        var data = $(this).data('num');
        info = [data, data1, data2];
        $('.cont_2').show();
        infoShow()
});

$(".cont_2 textarea").on("input", function() {
      text = this.value;
      infoShow()
})

function infoShow()
{
   add = textCreate();
   var html = arr.map(JSON.stringify).join('<br>') + '<br>' +JSON.stringify(add) ;
   $('.cont_2 #show').html(html)
}

function textCreate()
{
   var obj = {}, num = info[0], txt = 'Название: '+ info[1] +'<br>'+ 'номер:' + info[2] + '<br>' + text;
   obj[num] = txt;
   return obj
}


$("#ok").click(function(){
      if(add) {
         arr.push(add);
         add = null;
         text = "";
         $(".cont_2 textarea").val("")
      } ;

      $('.cont_2').hide();
});
});
$(function() {
    var arr = [],
        text = "",
        info = [],
        add;
    $(".cont button").click(function() {
        var data1 = $(this).prev().text();
        var data2 = $(this).next().text();
        var data = $(this).data("num");
        info = [data, data1, data2];
        $(".cont_2").show();
        infoShow()
    });
    $(".cont_2 textarea").on("input", function() {
        text = this.value;
        infoShow()
    });

    function infoShow() {
        add = textCreate();
        var html = arr.map(JSON.stringify).join("<br>") + "<br>" + JSON.stringify(add);
        $(".cont_2 #show").html(html)
    }

    function textCreate() {
        var obj = {},
            num = info[0],
            txt = "Название: " +
            info[1] + "<br>" + "номер:" + info[2] + "<br>" + text;
        obj[num] = txt;
        return obj
    }
    $("#ok").click(function() {
        if (add) {
            arr.push(add);
            add = null;
            text = "";
            $(".cont_2 textarea").val("")
        }
        $(".cont_2").hide()
    })
});
 </script>
</head>

<body>

<div class="cont">
<div>Текст</div><button data-num="445563">Кнопка</button><div>123</div>
<div class="cont">
<div>go</div><button data-num="123">Кнопка</button><div>0000</div>
</div></div>

<div class="cont_2" hidden="true">
    <div id="show"></div>
    <textarea name="txtComment"></textarea>
    <button id="ok">Ок</button>
</div>

</body>
</html>

[Artur_Hopf]

рони,
Спасибо, очень сильно помогаешь