HTML内の繰り返し処理におけるid属性の取得方法について

Question

前提・実現したいこと

Java(Spring boot)、HTML(Thymeleaf)、Javascript(jquery, ajax)を使用し、簡単なWebサービスを構築しています。
基本的なサービスの概要は、以下の通りです。

＜サービス概要＞
・バックエンドのサーバ（Spring bootで構築）から音楽データの一覧情報を取得
・それをthymeleafの"th:each"属性の繰り返し処理でHTML上に表示
・各音楽データについてそれぞれ"いいね"ボタンを設置し、押下された場合、ajaxを用いてそのデータをバックエンドに送り処理を行う

＜やりたいこと＞
"th:each"の繰り返し処理内にいいねボタンを設置していますが、そのbuttonのidがそれぞれのデータと対応させ、javascript側でそのidを取得したいと考えています。

しかし、現状は以下の通りコーディングしていますが、その場合先頭の情報のみのidしか取得できず、それぞれのデータに対応したいいねボタンが機能していません。

＜質問事項＞
ですので、繰り返し処理内で、それぞれのデータのidを取得するにはどのようにすれば良いのかご教授いただきたいです。
または、他に各データといいねボタンを対応させ、そのデータを取得する方法があれば教えていただきたいです。

よろしくお願いいたします。

該当のソースコード

<div th:each="songs:${songs}">
<iframe th:src="'https://open.spotify.com/embed/track/'+${songs.songId}" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<input type="button" th:id="ajax_btn" value="いいね" th:name="${songs.songId}"/><br />
</div>

$(function() {

    // Ajax通信テスト ボタンクリック
    $("#ajax_btn").click(function() {

    	var element = document.getElementById('ajax_btn');
    	var param   = element.getAttribute("name");

        $.ajax({
            type        : "GET",
            url         : "getTestData",
            dataType    : "json",
            data        : {
            	songId : param
            },
            success     : function(data) {
                            success(data);
                        },
            error       : function(XMLHttpRequest, textStatus, errorThrown) {
                            error(XMLHttpRequest, textStatus, errorThrown);
                        }
        });
    });
});

function success(data) {
    alert("いいね成功"+data);
}

Answer 1

th:id="ajax_btn"では同一ページ上に重複しない仕様のid属性の場合、複数ある前提の処理はできません。クラスにでもしましょう。

//     ↓ HTMLのほうもクラスに変えておく
    $(".ajax_btn").click(function() {
        var param = $(this).attr("name");
        // 略
    });

【.attr() | jQuery API Documentation】
https://api.jquery.com/attr/

Comments

[fy4-s]

ご回答ありがとうございます。
教えていただいたソースでまさにやりたいことが実現できました。
大変感謝申し上げます。