Как получить данные из полей формы, создать дочерний div2 внутри div1 на другой странице и в созданном div2 отображались данные из полей формы?

Я новичок в js, поэтому хотел бы узнать как подобное можно реализовать (для практике в универе нужно). Необходимо разработать скрипт, который получив данные из формы создает на другой странице внутри блока div1 блок div2. В div2 должны записываться данные из полей ввода формы. Название статьи должно быть внутри абзаца. Затем формируется список из 3 элементов, в каждом элементе абзац. Если научного руководителя не вводили то появлялось тире.

Это форма:

<form action="" method="" id="form">
                                <legend id="name_form"><p>Форма для записи:</p></legend>
                                <div class="string">
                                    <select class="select" name="" id="choiceSection">
                                        <option value="plenar">Пленарное заседание</option>
                                        <option value="sec1">Секция 1</option>
                                        <option value="sec2">Секция 2</option>
                                        <option value="sec3">Секция 3</option>
                                        <option value="sec4">Секция 4</option>
                                    </select>
                                </div>
                                <div class="string">
                                    <label for="statya_name" name="input_autor" ><p>Название статьи:</p></label>
                                    <input class="input" type="text" id="statya_name">
                                </div>
                                <div class="string">
                                    <label for="autors_name" name="input_autor" ><p> Автор:</p></label>
                                    <input class="input" type="text" id="autors_name">
                                </div>
                                <br>
<div class="string">
                                    <label for="academic" name="input_academic" ><p>Научный руководитель:</p></label>
                                    <input class="input" type="text" id="academic">
                                </div>
                                <br>
                                <div class="string">
                                    <p>Аннотация:</p>
                                    <textarea class="textA" name="" id="annotation" cols="30" rows="10"></textarea>
                                    <br>
                                </div>
                                <br>
                                <div class="PandR">
                                    <div class="button">
                                        <input type="submit" name="" id="sending">
                                    </div>
                                    <div class="button">
                                        <input type="reset" name="" id="clear">
                                    </div>
                                </div>
                        </form>

Условие: если выбранное значение select совпадает с id="plenar" то блок div2 создается как дочерний элемент элемента с id="plenar", если выбранное значение select совпадает с id="sec1" то блок div2 создается как дочерний элемент элемента с id="sec1". Как это примерно должно выглядеть:

 
<div class="content" id="dinamic">
                        <h4>
                            НАУЧНАЯ ПРОГРАММА
                        </h4>
                        <p><a href="">Научная программа.расширение файла</a></p>
                        <div class="section" id="plenar">
                            <h3>Пленарное заседание</h3>
                            <div class="Statya">
                                <p>Название статьи</p>
                                <ul>
                                    <li><p>Автор:данные из формы</p></li>
                                    <li><p>Научный руководитель:данные из формы</p></li>
                                    <li><p>Аннотация:данные из формы</p></li>
                                </ul>
                            </div>
                        </div>
                        <div class="section" id="sec1">
                            <h3>Секция 1</h3>
                            <div class="Statya">
                                <p>Название статьи</p>
                                <ul>
                                    <li><p>Автор:данные из формы</p></li>
                                    <li><p>Научный руководитель:данные из формы</p></li>
                                    <li><p>Аннотация:данные из формы</p></li>
                                </ul>
                            </div>
                        </div>
                    </div>

Пример кода на JS:

var choice = document.querySelector('#choiceSection').value;
    var stname = document.querySelector('#statya_name').value;
    var name = document.querySelector('#autors_name').value;
    var degree = document.querySelector('#academic').value;
    var annotation = document.querySelector('#annotation').value;

    document.getElementById('form').addEventListener('submit', function(e){
        e.preventDefault();
        if(choice = document.getElementById('plenar')){
            document.getElementById('plenar').onload = addElement;
        }
        else if(choice = document.getElementById('sec1')) {
            document.getElementById('sec1').onload = addElement;
        }
    })

    function addElement (){
        const newDiv = document.createElement("div");
        newDiv.className = "Statya";
        const nameStatya = document.createElement ("p");
        var list = document.createElement ("ul");
        var listLi1 = document.createElement ("li");
        var listLi2 = document.createElement ("li");
        var listLi3 = document.createElement ("li");
        var title1 = document.createElement ("p");
        var title2 = document.createElement ("p");
        var title3 = document.createElement ("p");

        newDiv.appendChild(nameStatya);
        newDiv.appendChild(list);
        list.appendChild(listLi1, listLi2, listLi3);
        listLi1.appendChild(title1);
        listLi2.appendChild(title2);
        listLi3.appendChild(title3);

        nameStatya.innerHTML = stname;
        title1.innerHTML = "Автор:" + name;
        title2.innerHTML = "Научный руководитель:" + degree;
        title3.innerHTML = "Аннотация:" + annotation;
    }

Еще есть такой вопрос. Если скрипт написан правильно то возникает другая проблема. При нажатии на кнопку страница перезагружается и выводит в окне браузера что страница, на которую я хочу вывести данные не доступна. Заранее спасибо!