HTML Modal changes

I need help with the edit button of my html where I can edit all attributes if I click it. Also any suggestions regarding with the modals I created I really struggled with the edit button any help will be appreciated.

My prof really wants me to make use of the edit button where I can edit all the attributes the problem is I had trouble making use of the modal

<html>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<title>Austerity | Inventory</title>

<div id="navigationbar" style="margin-top: -4%;">

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid" style="margin-left: 39%;">
          <a class="navbar-brand" href="#"></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="catMaintenance.html">PRODUCTS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="paymentValidation.html" onclick="renderShop()">VALIDATION</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="shipping.html" onclick="renderFAQs()">ORDERS</a>
                </li>
              </ul>
              <img src="notiflogo.png" style="width: 3%; margin-right: 3%;">
              <img src="../profilelogo.png" style="width: 3%; margin-right: 3%;">
              <img src="shiplogo.png" style="width: 3.5%; margin-right: 3%;">
              <a href="transactions.html"><img src="receiptslogo.png" style="width: 3.5%; margin-right: 10%; "></a>
            </div>
        </div>
  </nav>
</div>

<table class="table table-striped table-dark">
    <thead>
      <tr>
        <th scope="col">Image File</th>
        <th scope="col">Type</th>
        <th scope="col">Code</th>
        <th scope="col">Size</th>
        <th scope="col">Price</th>
        <th scope="col">Dimensions</th>
        <th scope="col">Collection</th>
        <th scope="col">Item Status</th>
        <th scope="col">Discount</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td scope="row"><img src="../homepagepics/1s.jpg" class="w-25"></td>
        <td>Shirt</td>
        <td>ST17</td>
        <td>XL</td>
        <td>750</td>
        <td>30.5 x 23</td>
        <td>Tie Dye</td>
        <td>Unsold</td>
        <td></td>
        <td>
          <button class="btn btn-secondary">Edit</button>
          <br><br>
          <button class="btn btn-success">Save</button>
        </td>
      </tr>
      <tr>
        <td scope="row"><img src="../homepagepics/2s.jpg" class="w-25"></td>
        <td>Shirt</td>
        <td>ST17</td>
        <td>XL</td>
        <td>750</td>
        <td>30.5 x 23</td>
        <td>Tie Dye</td>
        <td>Unsold</td>
        <td></td>
        <td>
          <button class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Edit</button>
          <br><br>
          <button class="btn btn-success">Save</button>
        </td>
      </tr>    
    </tbody>
  </table>

  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">New message</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="col-form-label">Recipient:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="col-form-label">Message:</label>
              <textarea class="form-control" id="message-text"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Send message</button>
        </div>
      </div>
    </div>
  </div>


  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>