Update drop down with javascript

I am working on simple desktop billing application using Electron js and pouch db

here is my html code

function dbsubmit(){
     var Sno =  document.getElementById('number').value ;
     var date =   document.getElementById('date').value ;
     var Time =   document.getElementById('time').value ;
     

     var doc = {
          _id: Sno,
          Date: date,
          time: Time,
                
     };
     db.put(doc, function(err, response) {
          if (err) {
             return console.log(err);
          } else {
             console.log("Document created Successfully",response);
          }
     });
     
 
     

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bill System</title>
<style>
  
</style>
</head>
<body>
    <h1>Bill</h1>

    <form>
        <label for="sno">S.NO</label>
        <select name="sno" id="number">
            
        </select>
        
        <label for="fname">Name : </label>
        <input type="text" id="date" name="dtime" >
        <label for="fname">age : </label>
        <input type="text" id="time" name="dtime" >
        
        <input type="button" id=billsub  value="Save"/>      
        

    </form>

<script src="./db.js"></script>
</body>
</html>

My question is

when i first save the form the values will be
sn.no - 1
name - xxx
age - yyy

after saving form the s.no select box should be automatically updated with number 2 option

anyone help me with code

Solution

Please try the following snippet(I only test it without the db logic since you only want to update the html element):

const form = document.getElementById('form1');
form.addEventListener('submit', dbsubmit);
function dbsubmit(e) {
    e.preventDefault();
     var Sno =  document.getElementById('number').value ;
     var date =   document.getElementById('date').value ;
     var Time =   document.getElementById('time').value ;
     //Get select element here
     var select = document.getElementById('number');
     var doc = {
          _id: Sno,
          Date: date,
          time: Time,
     };
     //Do your db logic here to save the actual data
      db.put(doc, function(err, response) {
          if (err) {
             return console.log(err);
          } else {
            //Updating the html if the data is saved
              var opt = document.createElement('option');
              opt.value = ++doc._id;
              opt.innerHTML = opt.value;
              select.appendChild(opt);
              opt.selected = true
            
            console.log("Document created Successfully",response);
          }
     }); 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bill System</title>
<style>
  
</style>
</head>
<body>
    <h1>Bill</h1>

    <form id="form1">
        <label for="sno">S.NO</label>
        <select name="sno" id="number" value="1">
            <option id="snoValue" value="1" selected>1</option>
        </select>
        
        <label for="fname">Name : </label>
        <input type="text" id="date" name="dtime" >
        <label for="fname">age : </label>
        <input type="text" id="time" name="dtime" >
        
        <input type="submit" id=billsub value="Save"/>      
        

    </form>

<script src="./db.js"></script>
</body>
</html>