Modification button not working in dynamic table HTML

Question

Hi I am trying to make a modify booking page but the save button in my table is not working, there is not output. Originally i used text input (save was still working) but changed to drop down then the save button stopped working. After clicking the save button, the selected option should over write the previous data on the table.Please help me take a look.

I have uploaded the code.

edit: here is the image of the current outcome.

I want the new data selected from the dropdown bar to replace the old data on the table.

Thank you.

function edit_row(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";

  alert("Booking has been succesfully modified.");
}

<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( '3') ">
    <input type="button " id="save_button3 " value="Save " class="save " onclick="save_row( '3') " hidden>
    </td><td><input type="button " value="Delete booking " class="delete " onclick="delete_row( '3') ">
    </td>
    </tr>
    
    <tr id="row4 ">
    <td id="date_row4 ">2022-05-11</td>
    <td id="roomtype_row4 ">103</td>
    <td id="stime_row4 ">16:00</td>
    <td>
    <input type="button " id="edit_button3 " value="Modify booking " class="edit " onclick="edit_row( '4') ">
    <input type="button " id="save_button3 " value="Save " class="save " onclick="save_row( '4') " hidden>
    </td><td><input type="button " value="Delete booking " class="delete " onclick="delete_row( '4') ">
    </td>
    </tr>
    
    
    </table>
    </td>
    </tr>
    </table>
    </div>

Answer 1

You have a lot of typos, get rid of them and it will work as expected.

I just used a simple "replace: (' "' for '"')" in a text editor and it starts working.

In your code you have: <input type="button " id="edit_button3 " value="Modify booking " class="edit " onclick="edit_row( '3') ">

And your function is expecting: <input type="button" id="edit_button3" value="Modify booking" class="edit" onclick="edit_row( '3')">

Your id: 'edit_button3 ', your function expectation: 'edit_button3'.

But also, you have a repeated save_button3 and edit_button3, but not save_button4 and edit_button4.

There is an almost working snipped, you need to keep adding functionality needed, as "delete_row()" and others.