получить скрытое значение формы и показать в модальном

Question

ниже форма на моей странице.В каждой строке вы видите скрытое значение с именем «unitType».То, что я хотел бы сделать, это нажать кнопку в каждой строке, получить значение скрытого значения unitType этой конкретной строки и открыть модал начальной загрузки, установить для тега image для модальных изображений src значение из скрытого поля и объединить остальную частьпуть к отображению соответствующего изображения в модале начальной загрузки.

Надеюсь, это правильный способ задать вопрос здесь.

<form action="" method="POST">
<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Location</th>
                <th scope="col">Serial #</th>
                <th scope="col">Level</th>
                <th scope="col"></th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr scope="row">
                <td class="align-middle">East Entrance (Elvis Car)</td>
                <td class="align-middle">CR5E180022B</td>
                <td><input type="number" name="LevelAmount[]" class="unitType form-control" value=""></td>
                <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Image</button></td>
                <td><input type="hidden" class="unitType" name="unitType" value="Sienna 5 B.png"></td>
                <td><input type="hidden" name="id[]" value="S1149"></td>
            </tr>
            <tr scope="row">
                <td class="align-middle">Hotel Elevator Bthrm - Womens</td>
                <td class="align-middle">CS3G170159</td>
                <td><input type="number" name="LevelAmount[]" class="unitType form-control" value=""></td>
                <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Image</button></td>
                <td><input type="hidden" class="unitType" name="unitType" value="Sienna 3.png"></td>
                <td><input type="hidden" name="id[]" value="S1151"></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="row">
    <div class="col-12 text-right"><input type="hidden" name="SessionID[]" value="">
        <input class="btn btn-warning" type="submit" name="submit" value="Submit">
    </div>
</div>

HTML-код ниже - мой модальный код начальной загрузки.

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">Diffuser</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
    <img id="unitType" src="">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
    </div>
</div>

Answer 1

Пожалуйста, найдите обновленный ответ

$("button").click(function() {
  var ele = $(this).parents('tr').find('input[type="hidden"]').val()
  alert(ele)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="POST">
  <div class="table-responsive">
    <table class="table table-striped table-sm">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Location</th>
          <th scope="col">Serial #</th>
          <th scope="col">Level</th>
          <th scope="col"></th>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr scope="row">
          <td class="align-middle">East Entrance (Elvis Car)</td>
          <td class="align-middle">CR5E180022B</td>
          <td><input type="number" name="LevelAmount[]" class="unitType form-control" value=""></td>
          <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Image</button></td>
          <td><input type="hidden" class="unitType" name="unitType" value="Sienna 5 B.png"></td>
          <td><input type="hidden" name="id[]" value="S1149"></td>
        </tr>
        <tr scope="row">
          <td class="align-middle">Hotel Elevator Bthrm - Womens</td>
          <td class="align-middle">CS3G170159</td>
          <td><input type="number" name="LevelAmount[]" class="unitType form-control" value=""></td>
          <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Image</button></td>
          <td><input type="hidden" class="unitType" name="unitType" value="Sienna 3.png"></td>
          <td><input type="hidden" name="id[]" value="S1151"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="row">
    <div class="col-12 text-right"><input type="hidden" name="SessionID[]" value="">
      <input class="btn btn-warning" type="submit" name="submit" value="Submit">
    </div>
  </div>