JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="middle">View your bookings</h1>
<span style="position:fixed ;left: 1350px; top: 155px;">Logout</span>
<span style="position:fixed ;left: 675px;top: 155px;"><a href="home page.html">Homepage</a></span>
<div id="wrapper">
  <table align='left' style="background-color:#001641;  padding-right: 750px; padding-top: 0px; padding-bottom: 400px;">
    <tr>
      <td>
        <table align='left' cellspacing=20px cellpadding=10px id="data_table" border=5 "style="width:200% " rules=" all ">
               <tr>
                  <th >Date</th>
                  <th>Room type</th>
                  <th>Time</th>
                  <th></th>
                  <th></th>
               </tr>
               <tr id="row1">
                  <td id="date_row1">2022-05-10</td>
                  <td id="roomtype_row1">101</td>
                  <td id="stime_row1">09:00</td>
                  <td>
                     <input type="button" id="edit_button1" value="Modify booking" class="edit" onclick="edit_row( '1')">
          <input type="button" id="save_button1" value="Save" class="save" onclick="save_row( '1')" hidden>
      </td>
      <td><input type="button" value="Delete booking" class="delete" onclick="delete_row( '1')">
      </td>
    </tr>
    <tr id="row2">
      <td id="date_row2">2022-05-09</td>
      <td id="roomtype_row2">102</td>
      <td id="stime_row2">13:00</td>
      <td>
        <input type="button" id="edit_button2" value="Modify booking" class="edit" onclick="edit_row( '2')">
        <input type="button" id="save_button2" value="Save" class="save" onclick="save_row( '2')" hidden>
      </td>
      <td><input type="button" value="Delete booking" class="delete" onclick="delete_row( '2')">
      </td>
    </tr>
    <tr id="row3">
      <td id="date_row3">2022-05-11</td>
      <td id="roomtype_row3">101</td>
      <td id="stime_row3">10:00</td>
      <td>
        <input type="button" id="edit_button3" value="Modify booking" class="edit" onclick="edit_row(...

JavaScript

function edit_row(no) {
console.info(no);
  document.getElementById("edit_button" + no).style.display = "none";
  document.getElementById("save_button" + no).style.display = "block";
 
  var date = document.getElementById("date_row" + no);
  var roomtype = document.getElementById("roomtype_row" + no);
  var stime = document.getElementById("stime_row" + no);


  var date_data = date.innerHTML;
  var roomtype_data = roomtype.innerHTML;
  var stime_data = stime.innerHTML;

  date.innerHTML = "<input type='date' min='2022-05-09' max='2022-05-13' id='date_text" + no + "' value='" + date_data + "'>";

  roomtype.innerHTML = '<select id="levels-list' + no + '">\
                            <option value="A" id="option-1">101</option>\
                            <option value="B" id="option-2">102</option>\
                            <option value="C" id="option-3">103</option>\
                            </select>';
  document.getElementById("levels-list" + no).value = roomtype_data;

  roomtype.onchange = function() {
    stime.innerHTML = '<select id="levels-list1' + no + '">\
                      <option value="A1" id="option-11">101</option>\
                      <option value="B1" id="option-22">102</option>\
                      <option value="C1" id="option-33">103</option>\
                      </select>';
    document.getElementById("levels-list1" + no).value = stime_data;
  }
}

function save_row(no) {
  var date_val = document.getElementById("date_text" + no).value;
  var roomtype_val = document.getElementById("roomtype_text" + no).value;
  var stime_val = document.getElementById("stime_text" + no).value;


  document.getElementById("date_row" + no).innerHTML = date_val;
  document.getElementById("roomtype_row" + no).innerHTML = roomtype_val;
  document.getElementById("stime_row" + no).innerHTML = stime_val;


  document.getElementById("edit_button" + no).style.display = "block";
  document.getElementById("save_button" + no).style.display = "none";

 ...