Access and Disable/enable input type date in td

Question

I have a table that contains 2 Date type inputs, a span and 2 clickable icons for edit and save. What I am aiming for is to enable the input type date in my td's "onClick" on Edit Icon. But I don't know how to access the element in the td, to alter the disabled attribute. On edit the disabled attribute should be False, and after alteration if he clicks the save icon, the disabled attribute should go back to True. A plus would be for me, if I can make the save icon disabled(not clickable) by default, if the edit button was not clicked first, and after save it goes back to being disabled.

This is my HTML code:

<table class="table table-striped" id="pageNbr">
  <thead>
    <tr class="header">
      <th>Begin Date</th>
      <th>End Date</th>
      <th>School Year</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
      <td><input type="date" class="EndDate" id="enddate" disabled> </td>
      <td> <span id="Syear"> 2021-2022</span></td>
      <td style="box-shadow: none !important; background-color: white !important;">
        <a href="#"><i class="far fa-save Icon-save"></i></a>
        <a href="#">
          <i class="far fa-edit Icon-edit"></i></a>
      </td>
    </tr>
  </tbody>
</table>

My jQuery so far is:

$('.Icon-edit').click(function() {
  var currentTD = $(this).parents('tr').find('td');
  $.each(currentTD, function() {
    $(this).prop();
  });
});


$('.Icon-save').click(function() {
  var currentTD = $(this).parents('tr').find('td');
  $.each(currentTD, function() {
    $(this).prop();
  });
});

Answer 1

You can do this in one event listener and check the class of the one that was clicked to determine disable/enable.

I added classes to the <a> rather than using the <i> and added css to hide the "save" by default then use hide/show to toggle display on the buttons

$('.date-toggle').click(function() {
  const $btn = $(this);
  const disable = $btn.hasClass('save');
    
  $btn.closest('tr').find('.BeginDate, .EndDate').prop('disabled', disable);
  $btn.hide().siblings('.date-toggle').show()

});

.date-toggle.save{display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="pageNbr">
  <thead>
    <tr class="header">
      <th>Begin Date</th>
      <th>End Date</th>
      <th>School Year</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
      <td><input type="date" class="EndDate" id="enddate" disabled> </td>
      <td> <span id="Syear"> 2021-2022</span></td>
      <td style="box-shadow: none !important; background-color: white !important;">
        <a href="#" class="date-toggle save" ><i class="far fa-save Icon-save">Save</i></a>
        <a href="#"  class="date-toggle edit">
          <i class="far fa-edit Icon-edit">Edit</i></a>
      </td>
    </tr>
  </tbody>
</table>