data- プロパティが書き換えられない

Question

1. 特定のイベント（下記の例では $('.btn').on('click'）でdata-id属性を書き換えるためにdata('id','変更後')としています。
2. これを実行して、developer-tool等で要素のプロパティを見てもdata-id="1"は何も変わっていませんでした。
3. 一方で、$('.btn_2').on('click'を実行すると変更後の2が取得することができました。

上記の動作するに困惑しているのですが、この様に実際には要素に変化がないのにDOM的には変更されている原因がわかりません。また、変更後のdataの値を取得できれば結果は良いのですが、一方で、バグの温床としたくないために、適切に要素のプロパティとしても変更させたいと考えております。どの様にすれば正しく変化させることができるのでしょうか？
JSFiddle

<form action="" method="">
    <input id ="this_input" class="input" type="text" name="inputs[]" data-id="1">
    <input class="input" type="text" name="inputs[]" data-id="1">
    <input class="input" type="text" name="inputs[]" data-id="1">
    <button type="button" class="btn">button</button>
    <button type="button" class="btn_2">button2</button>
</form>

$(function(){
    $('.btn').on('click', function() {
    $('#this_input').data('id','2')
    });
    $('.btn_2').on('click', function() {
    alert($('#this_input').data('id'))
    });
});

Answer 1

jQueryの.dataと、DOMのdata-***は、初期化の際にはdata-***から.dataにコピーされますが、それ以降は別個に動作します（jQuery）。

あくまでdata-***を操作したいのであれば、.attrを使うか、DOMサイドのdataset（MDN）を使いましょう。

Answer 2

jQueryのdataは一時的なデータ保持でしかないので、
属性を買い換えることはありません。

どうしてもHTML要素にまで反映したいなら

$('#this_input').attr('data-id',3);
または
$('#this_input').get(0).dataset["id"]=4;

のような感じで対応してください

Answer 3

 $('.btn').on('click', function() {
    $('#this_input').attr('data-id','2')
    });

直接attrを丸ごと修正することで対応することができました、お騒がせして申し訳ございません。
事故解決とさせてください。

Comments

[yambejp]

別途回答しておきましたがhtml要素に対してdatasetを利用すると
カスタムデータの書き換えができます