how can i make the form in html inside expanded table dosent close until sending the form?

I didnt know how to write this code in a way to make the form inside every row in a table not close until i click on send button ,because my background in javaScript is little .

Also i didnt konw how to make the icon appear in a table data inside the table

<section class="main">
    <div>
      <table>
         <tr>
           <th> Name </th>
           <th>Title</th>
           <th>Description</th>
           <th>Evaluate</th>
          </tr>
          <tr onClick='toggleRow(this)'>
             <td>Dr.sasa</td>
             <td>B System</td>
             <td>the project .....</td>
             <td><button><a><i class="fa-solid fa-arrow-down-long"></i></a></button></td>
          
          <div>
             <td class='expanded-row-content hide-row'> 
            <form action="">
              <div class="in-form">
                <p class="Evaluate-QForm"><span>eee</span> </div>  
                  
              <input type="radio" id="approve" name="Evaluate">
              <label for="approve">approve </label>
              <input type="radio" id="reject" name="Evaluate">
              <label for="reject">reject</label><br>

            
              <label for="comment">Comments </label>
              <input type="textarea" id="comment"name="comment" >


              <input type="submit" value="Send">
            </div>
          </div>
            </form>


          </td>
        </tr>

        <tr onClick='toggleRow(this)'>
          <td>Dr.Ree </td>
          <td>S System</td>
          <td>Application .....</td>
          <td class="ev-arrow-button"><a> <i class="fa-solid fa-arrow-down-long"></i></a></td>

          <td class='expanded-row-content hide-row'>
            <form action="">
              <div class="in-form">
              <p class="Evaluate-QForm"><span> eee</span> </div> 

              <input type="radio" id="approve" name="Evaluate">
              <label for="approve">approve </label>
              <input type="radio" id="reject" name="Evaluate">
              <label for="reject">reject</label><br>
              </p>

              <p class="Ev-Com-Qform">
              <label for="comment">Comments </label>
              <input type="textarea" id="comment"name="comment" >
              </p>

              <div >
              <input type="submit" value="Send">
              </div>
            

            </form>


          </td>
        </tr>

    </table>

    </div>


</section>

const toggleRow = (element) => {
element.getElementsByClassName(‘expanded-row-content’)[0].classList.toggle(‘hide-row’);
console.log(event);
}