javascript - Getting the value of the input field using jquery

Question

I have a table with edit button, every table contains an edit button with the different input field value, I need to get the different value of the input field when different edit buttons are hit. My code is getting the same value again and again not getting the random values, Here is my code of table

<tr>
    <td>64</td>
    <td>2</td>
    <td>2?</td>
    <input type="hidden" name="idd" value="64" id="main-id">
    <td>
        <span id="editBtn" class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
    <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
</tr>
<tr>
    <td>65</td>
    <td>25</td>
    <input type="hidden" name="idd" value="65" id="main-id">
    <td>
        <span id="editBtn" class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
        <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
</tr>

Within this table when I try to edit each time using jquery it bring up the first value of the hidden field which is 64. Below is the jQuery which I used to pull the value of the hidden field.

var bla = $('#main-id').val();
alert (bla);

Answer 1

$('#editBtn').on('click', function(e){
  console.log($('#main-id').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>64</td>
    <td>2</td>
    <td>2?</td>
    <input type="hidden" name="idd" value="64" id="main-id">
    <td>
      <span id="editBtn" class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
  <tr>
    <td>65</td>
    <td>25</td>
    <input type="hidden" name="idd" value="65" id="main-id">
    <td>
      <span id="editBtn" class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
</table>