How to implement the creation of a new object in the popup window with value initialization in the form?

Question

JavaScript

The question is more about JavaScript.
Using the tutorial , I implement the ability to add new entities (ForeignKey and ManytoMany relationships) in the popup window. The tutorial uses one add button, but I'm trying with two.


Added the following code to the html form

{form.field1}
    <a class="text-success" href="/project/create" id="add_project" onclick="return showAddPopup(this);"><i class="fas fa-plus fa-lg"></i></a>

    {{ form.field2 }}
    <a class="text-success" href="/technology/create" id="add_technology" onclick="return showAddPopup(this);"><i class="fas fa-plus fa-lg"></i></a>

The script is like this

<script type="text/javascript">

function showAddPopup(triggeringLink) {
    var name = triggeringLink.id.replace(/^add_/, '');
    href = triggeringLink.href;
    var win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
    win.focus();
    return false;
}
function closePopup(win, newID, newRepr, id) {
    $(id).append('<option value=' + newID + ' selected >' + newRepr + '</option>')
    win.close();
}

</script>

What's the problem:
when I add a Project, the popup closes and redirects back to the form with the new value already selected in the Project popup. In the DB, too, all the rules were added. But when I add Technology used on the project, the new value is also initialized in the first window (Project), but it is stored correctly in the database, that is, the visual display is lame. If I refresh the page with the form, then in the Technology drop-down this value can already be seen and selected.

I really hope I made the point clear. I don't know JS so unfortunately I can't even fix this problem

Answer 1

So you have a pop-up for the project and for the technology are no different from each other. It is necessary either to use different callbacks or pass additional arguments in order to distinguish which of the popups has closed.