列表中的按钮仅适用于第一行数据，单击按钮时如何从每一行获取数据？

Question

我想从按钮所在的每一行获取数据

@GetMapping("/film/{title}")

<td><a href="/film/film.title" th:text="${film.title}">Film</a>

我在这里consolo记录了来自输入的值，但是仅适用于第一行

$(document).ready(function() {
    listar_predios();



    function listar_predios() {
        $.ajax({
            type: 'ajax',
            url: $host + 'predios/listar_predios',
            asyn: true,
            dataType: 'json',
            success: function(data) {
                var html = '';
                var i;

                for (i = 0; i < data.length; i++) {
                    html += '<tr id="predios">' +
                        '<td>' + data[i].clave_catastral + '</td>' +
                        '<td>' + data[i].productor + '</td>' +
                        '<td>' + data[i].uso_suelo + '</td>' +
                        '<td>' + data[i].clase_tierra + '</td>' +
                        '<td>' + data[i].cultivo1 + '</td>' +
                        '<td>' + data[i].cultivo2 + '</td>' +
                        '<input class="clave_catastral" type="hidden" value="' + data[i].clave_catastral + '">' +
                        '<td style="text-align:right;">' +

                        '<button  class="btn btn-info btn-sm ver-mapa">VER EN MAPA</button>' +
                        '</td>' +
                        '</tr>';
                }

                $('#listado_predios').html(html);

                $('#tabla_predios').DataTable({
                    responsive: true,
                })


            }

        })
    }

});