как отправить две формы с разными кнопками на веб-странице

Question

Я создал форму отправки, которую использовал (отношение один к одному) для всех полей, кроме некоторых полей, которые не связаны с отношением один к одному в файле models.py, и я использовал (отношения один ко многим) к навыкам, версии, последнему -использован, опыт. Теперь мой вопрос заключается в том, как отправить данные в базу данных, щелкнув кнопку добавления без обновления страницы с использованием ajax и javascript.

<script>
    function insertdata(id)
        {
        alert("data")
        var itskill= $("[name='it_skills']").val();
        var version= $("[name='version']").val();
        var skilllastused= $("[name='it_skills_last_used']").val();
        var experience= $("[name='experience']").val();
        var data = {
              it_skills:itskill,
              version:version,
              it_skills_last_used:skilllastused,
              experience:experience
        }
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:8000/app/data1/"+id+"/",
            data:JSON.stringify(data);
            Content-Type: 'application/json ;charset =utf-8',
            dataType:'json',
            async:false
            success: function (msg) {
              alert('Data Saved');
            }
            error: function (status) {
              alert('Insertion Failed');
            }
        });
        }

  </script>

В Html,

<form method="post">
    {% csrf_token %}
    <div id="div_id_country_work_authorization" class="form-group">
        <label for="id_country_work_authorization" class=" requiredField">Country work authorization<span class="asteriskField">*</span> </label>
        <div class=""> <input type="text" name="country_work_authorization" maxlength="100" class="textinput textInput form-control" required="" id="id_country_work_authorization"> </div>
    </div>
    <div id="div_id_preferred_roles" class="form-group">
        <label for="id_preferred_roles" class=" requiredField">Preferred roles<span class="asteriskField">*</span> </label>
        <div class=""> <input type="text" name="preferred_roles" maxlength="100" class="textinput textInput form-control" required="" id="id_preferred_roles"> </div>
    </div>
    <div id="div_id_preferred_job_type" class="form-group">
        <label for="id_preferred_job_type" class=" requiredField">Preferred job type<span class="asteriskField">*</span> </label>
        <div class=""> <input type="text" name="preferred_job_type" maxlength="100" class="textinput textInput form-control" required="" id="id_preferred_job_type"> </div>
    </div>
    
    

    <div class="form-row">
            <div id="div_id_it_skills" class="form-group col-md-3 mb-0">
                <label for="id_it_skills" class=" requiredField">It skills<span class="asteriskField">*</span> </label>
                <div class=""> <input type="text" name="it_skills" maxlength="100" class="textinput textInput form-control" required="" id="id_it_skills"> </div>
            </div>
            <div id="div_id_version" class="form-group col-md-3 mb-0">
                <label for="id_version" class=" requiredField">Version<span class="asteriskField">*</span> </label>
                <div class=""> <input type="number" name="version" step="any" class="numberinput form-control" required="" id="id_version"> </div>
            </div>
            <div id="div_id_it_skills_last_used" class="form-group col-md-3 mb-0">
                <label for="id_it_skills_last_used" class=" requiredField">last used<span class="asteriskField">*</span> </label>
                <div class=""> <input type="text" name="it_skills_last_used" maxlength="100" class="textinput textInput form-control" required="" id="id_it_skills_last_used"> </div>
            </div>
            <div id="div_id_experience" class="form-group col-md-3 mb-0">
                <label for="id_experience" class=" requiredField">Experience<span class="asteriskField">*</span> </label>
                <div class=""> <input type="text" name="experience" maxlength="100" class="textinput textInput form-control" required="" id="id_experience"> </div>
            </div>
            <div class="form-group">
                <button onclick="insertdata()" type="submit" class="btn btn-default">Add</button>
            </div>
    </div>






    <div id="div_id_gender" class="form-group">
        <label for="id_gender" class=" requiredField">Gender<span class="asteriskField">*</span> </label>
        <div class=""> <input type="text" name="gender" maxlength="100" class="textinput textInput form-control" required="" id="id_gender"> </div>
    </div>
    <div id="div_id_date_of_birth" class="form-group">
        <label for="id_date_of_birth" class=" requiredField">Date of birth<span class="asteriskField">*</span> </label>
        <div class=""> <input type="text" name="date_of_birth" maxlength="100" class="textinput textInput form-control" required="" id="id_date_of_birth"> </div>
    </div>
    <div id="div_id_marital_status" class="form-group">
        <label for="id_marital_status" class=" requiredField">Marital status<span class="asteriskField">*</span> </label>
        <div class=""> <input type="text" name="marital_status" maxlength="100" class="textinput textInput form-control" required="" id="id_marital_status"> </div>
    </div>
    <div id="div_id_languages" class="form-group">
        <label for="id_languages" class=" requiredField">Languages<span class="asteriskField">*</span> </label>
        <div class=""> <input type="text" name="languages" maxlength="100" class="textinput textInput form-control" required="" id="id_languages"> </div>
    </div>
    </div>
    <div align="center">
    <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

помогите пожалуйста заранее спасибо