안녕하세요!

퇴근 후에 독학으로 제이쿼리를 연습하고 있는데 풀리지 않는 부분이 있어 질문 드리고 싶습니다

제이쿼리와 부트스트랩을 이용해서 구현하려고 하는데요

1. 1번 모달창을 열고 input에 숫자 입력해서 확인버튼 클릭

2. input에 입력된 숫자만큼 div가 생성

ex) 20입력하고 확인 누르면 아래 이미지처럼 div가 20개 생성

3. 생성된 div중 아무거나 클릭하면 2번 모달창이 열림

4. 2번 모달창 input에 이름과 날짜를 지정해서 확인버튼 클릭

5. 2번 모달창에 입력한 값이 div에 넣어지도록 구현

현재 4번까지는 됐는데 5번에서 div is not defined at HTMLButtonElement.<anonymous> 에러가 뜹니다 ㅠㅠ

$(document).ready(function () {
  // 출력 버튼
  $("#btn").click(function () {
    var number = $("#number").val();
    var num = document.getElementById('number_area'); //결과 출력
    num.innerHTML = "";
    if (number < 1) {
      alert("숫자를 입력해 주세요.");
      $("#number").focus();
    }
    //입력된 숫자만큼 div로 출력
    $("#number_area").empty();
    for (var i = 1; i <= number; i++) {
      var div = document.createElement('container');
      var numb = $('#number_area').val();
      div.innerHTML = '<div class="container"><div class="col-sm-1" type="button" data-toggle="modal" data-target="#userModalCenter"><a class="name" href="#">NAME</a></div>';
      num.appendChild(div);
    }
  });
  $("#btn2").click(function (e) {
    e.preventDefault();
    var userName = $(this).parents('.modal-content').find(".modal-body input[name='userName']").val();
    var userData = $(this).parents('.modal-content').find(".modal-body input[name='userData']").val();
    div.getElementById(userName, userData);
  })
});

노란 부분이 input에 입력된 숫자만큼 div가 생성되도록 구현한 부분인데

마지막 빨간 밑줄 부분을 노란 밑줄 부분과 어떻게 융합시켜 응용해야 할지 모르겠네요 ㅠㅠ