How to show div/form when select function executes in javascript?

I need some help on when my FullCalendar Select:function{} exectues I want to my div (form) to show. right now I implemented a alert/prompt to show. But I need help or guide me on what am I doing wrong in my code below. All I need is to show my div when I double click on the calendar, basically replace the prompt to the form. thank you for the help. here is my code.

Javascript snippet:

  select: function(info ) {
        let title = prompt("Event Content:");
        if (title) {
            calendar.addEvent({
                title: title,
                start: info.startStr,
                end: info.endStr
            })
        }
        calendar.unselect();
    },

HTML:

    <div class="modal fade" id="schedule-edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Add Task</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
               <form id="event-form">
                    <div class="form-group">
                        <label>Title:</label>
                        <input type="text"  name = "title" id="title" class="form-control">
                    </div>
                        <div class="form-group">
                        <label>Project:</label>
                        <input type="text" id="project" class="form-control">
                    </div>
                        <div class="form-group">
                        <label>Est. Time (hours)</label>
                        <input type="text" id="time" class="form-control" placeholder="(Examples: 3,12.5,5.75")>
                    </div>
                        <div class="form-group">
                        <label>Time Spent (hours)</label>
                        <input type="text" id ="timeSpent" class="form-control" placeholder="(Examples: 3,12.5,5.75")>
                    </div>
                       <div class="form-group">
                        <label>Description</label>
                       <!--Add rich text editor here -->
                               <div class="sample-toolbar" id="description">
        <a href="javascript:void(0)" onclick="format('bold')"><span class="fa fa-bold fa-fw"></span></a>
        <a href="javascript:void(0)" onclick="format('italic')"><span class="fa fa-italic fa-fw"></span></a>
        <a href="javascript:void(0)" onclick="format('insertunorderedlist')"><span class="fa fa-list fa-fw"></span></a>
        <a href="javascript:void(0)" onclick="setUrl()"><span class="fa fa-link fa-fw"></span></a>


</div>
   <div class="editor" id="sampleeditor"></div>
                             <div class="form-group">
                        <label>Priority</label>
 
                      <select class="form-control"  id='firstList' name='firstList' onclick="getFoodItem()">
    </select>
                    </div>
                           <div class="form-group">
                           <label>Start Date</label>
                               <br>
                    <input  type="date" id="myDate" placeholder="yyyy-MM-dd" />
                           </div>
                                <div class="form-group">
                           <label>Due Date</label>
                               <br>
                    <input type="date" id="myDue" placeholder="yyyy-MM-dd" />
                           </div>
                    </div>
                </form>


            </div>