how i use multiple button on html table with ajax

<
<div class="form-group">
          <div >
              <a href="/addcourse">
            <button class="btn btn-primary ">add course</button>
        </a>
    <div class="center">
      
      <h1>manage courses</h1>
    </div>
    <div style="padding-left: 500px">
    <form class="form-horizontal" style="width: 50%;">
    
     
      <div class="form-group">
          <label for="faculty" class="col-sm-2 control-label" ></label>
          <div class="col-sm-10">
            <div class="btn-group">
              <button index=0 id='facultyDropdown' class="btn">Faculties</button>
              <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                  {{#facultyId}}
                     <li><a index="{{id}}">{{faculty}}</a></li>
                  {{/facultyId}}              
              </ul>
            </div>
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
              <input id="submit" name="submit" type="bottom" value="submit" class="btn btn-primary submit">

               <table class="table">
        <thead>
          <tr>
            <th scope="col1" >corse code</th>
            <th scope="col1" >course name</th>
            <th scope="col2">credit hourse</th>
           
            <th scope="col5"></th>
            <th scope="col6"></th>
          </tr >
          <tbody id="myTable"></tbody>
        </thead>
      </table>
          </div>
      </div>
  </form>
    </div>

this html page has 2 main buttons and i generated 2 mot bottuns in every taple row the 2 buttons which in the row doesnt work with ajax i dont know why can u help me please and thanks

$(document).ready(function(){

  function buildTable(data){
        document.getElementById('myTable').innerHTML = "";
    
    var table = document.getElementById('myTable');
        for (var i = 0; i < data.length; i++){
            var row = `<tr>
                            <td>${data[i].code}</td>
                            <td>${data[i].course}</td>
                            <td>${data[i].id}</td>
              <td><button id=${data[i].id} name="update" type="button" value="${data[i].id}"  class="update" >update</button></td>
              <td><button id=${data[i].id} name="update" type="button" value="${data[i].id}"  class="delete" >delete</button></td>
                      </tr>`
          
            table.innerHTML += row


        }
    }
  $(".dropdown-menu li a").click(function(){
    const index = $(this).attr('index');
    $("#facultyDropdown").attr('index', index);
    $("#facultyDropdown").text($(this).text());
  });
 
  $("#submit").click(function() {

    console.log('alaa');
    
    const facultyId = $("#facultyDropdown").attr('index');

   
    $.ajax({
      type: "post",
      url: `/api/v1/faculties/`+`${facultyId}`,
      
      success:function(res){
        courses= res
      
        buildTable(courses)
        console.log('courses')
        
      }    
    });
  });  

 $(".delete").click(function() {
 
    const corseid = $(this).attr("id");
   
   console.log(corseid);

   
    $.ajax({
      type: "delete",
      url: `/api/v1/courses/`+`${corseid}`,
      
      success:function(res){
       alert(`course deleted ${res}`)
        
      }    
    });

  
  
  });  


  $(".update").click(function() {
 
    const corseid = $(this).attr("id");
   
   console.log(corseid);

   
    $.ajax({
      type: "put",
      url: `/api/v1/courses/`+`${corseid}`,
      
      success:function(res){
       alert(`course deleted ${res}`)
        
      }    
    });

  
  
  });  
      
});


 
 

and this is the ajax code ther rhink i doesnt understand it that the droplist and the add course button and submit button is working only the button which on the table donsent work the update and delete and thank u again for hrlp

>Solution :

The problem is when you create your event handler, the elements don’t exist (since they only exist after clicking submit).

You need to use event delegation, there are a few ways of doing that, this is probably the easiest:

$("#myTable").on("click", ".delete", function (event) {
// your delete code
});