The form opens by using AJAX and has radio inputs which is displayed each on seprate page

Question

// jQuery
//next question
function goNext(i) {
 $('#question'+i).attr('hidden', true);
 $('#question'+(i+1)).attr('hidden', false);
}

// for submit after each question 
$(document).ready(function(){ 
 $('#submit').click(function(){ 
  ('input[type="radio"]').click(function(){
   // variables for inputs
   var recommendation = $('#recommendation').val();  
   if(input[name="recommendation"]:checked) { 
   $('#return').html('<h4 style="color:red;">Required All Fields..</h4>'); 
   } 
   else { 
   // ajax in nette
   $.nette.ajax({
   method: 'GET',
   url: url
   data:$('#insert_data').serialize(), 
   success:function(data){ 
   $('form').trigger("reset"); 
   $('#return').fadeIn().html(data); 
   setTimeout(function(){ 
   $('#return').fadeOut("slow"); 
   }, 6000); 
   } 
   }); 
   } 
  }
 }); 
}); 

// sass

#open-button{
  font-size: 20px;
  font-weight: bold;
  position: sticky;
  margin-top: -3rem;
}

.nps {

  h5, .h5 {
    font-size: 1rem;
  }
  
  .modal-body {
    padding: 1rem 1rem 0 1rem;
  }
  
  #radios {
    display: flex;
    align-items: flex-start;
  }

  #radios label { 
    margin: auto;
    padding-right: inherit;
  }

  #radios input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
    border-radius: 50%;
    width: 16px;
    height: 16px;
    transition: 0.2s all linear;
    outline: none;
    position: relative;
    top: 4px;
    text-align: center;
  
  }

  input:checked, input:hover {
    border: 4px solid #e64980;
  }


  &:focus { 
    outline: 0;
  }
  
}
    #frm-netPromoterScore-feedback{
      vertical-align:top;
      width: 100%;
      height: 100px !important;
    }
}

<!-- LATTE template in Nette -->


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



  <a href="#netPromoterScoreModel" id="open-button" class="btn btn-pink btn-lg btn-block" data-toggle="modal">Dotaznik</a>


 {form netPromoterScore class => 'ajax-form'}

     <!-- FORM START -->
    <div id="netPromoterScoreModel" class="modal fade nps" role="dialog">
      <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">

          <div class="modal-header">
            <h5 class="modal-title">Dotaznik</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>

          <!-- QUESTION 1 -->
          <div id="question0" class="modal-body">
       <div class="row">
              <div class="col-12 form-group">
                {label recommendation}
              </div>
              <div id="radios" class="col-12 form-group">
                {input recommendation}
              </div>  
              <div class="col-12 modal-footer">
                <a href="javascript:void(0)" class="btn btn-pink" onclick="goNext(0)">Next Question</a>
                <button id="submit" type="submit" value="submit" class="btn btn-secondary">Close</button>
              </div>
            </div>
      </div>
      
             
          <!-- QUESTION 2 -->
          <div id="question1" class="modal-body" hidden>
       <div class="row">
              <div class="col-12 form-group">
                {label website}
              </div>
              <div id="radios" class="col-12 form-group">
                {input website}
              </div>
              <div class="col-12 modal-footer">
                <a href="javascript:void(1)" class="btn btn-pink" onclick="goNext(1)">Next Question</a>
                <button id="submit" type="submit" value="submit" class="btn btn-secondary">Close</button>
              </div>
            </div>
      </div>
          
          <!-- QUESTION 3 -->
          <div id="question3" class="modal-body" hidden>
       <div class="row">
              <div class="col-12 form-group">
                {label feedback}
              </div>
              <div id="textInput" class="col-12 form-group">
                {input feedback}
              </div>
              <div class="col-12 modal-footer">
                <button type="submit" class="btn btn-pink">Submit</button>
              </div>
            </div>
      </div>
        
          
        </div> <!-- END of modal content-->

   </div> <!-- end of Modal dialog-->
  </div> <!--end of the form-->

 {/form}

</div>

I am using nette framework where the form works well but on the side of js function I run into issue caused by my lack of experience that I would like to ask you for help to resolve them. Each question (value of radio input) will be saved to the database automaticly with several functionalities. The form can be closed anytime(but values should stored anyway in database) The form should be displayd after 14 days from creating acount and then every week. The form button close should function as submit button to database and at the same time to close the form.

1. An answer to first question is obligated.
2. Saving the values automaticaly when the form is being fulfilled.
3. Even when the form is closed answers are saved.
4. Ajax form will close when the form is closed or finished. Now, it is opening again when form is closed or finished.