title: Form is displaying despite "style="display: none'", jquery not working
body: <p>So I have a couple of problems here which I can't figure out:</p>
  
  <p>My form is displaying despite <code>style="display:none"</code>, and my jquery click action for <code>#createBtn</code> isn't working. I can't figure out why though.... Maybe some clearer minds can give me some insight?</p>
  
  <pre><code>@extends('layouts.app')
  
  @section('content')
  
      &lt;div class="col-md-10 offset-md-1"&gt;
          &lt;div class="row justify-content-center"&gt;
              &lt;table class="table"&gt;
                  &lt;thead&gt;
                      &lt;tr class="d-flex"&gt;
                          &lt;th style="width:19%"&gt;Date&lt;/th&gt;
                          &lt;th style="width:10%"&gt;Start time&lt;/th&gt;
                          &lt;th style="width:10%"&gt;Duration (min)&lt;/th&gt;
                          &lt;th style="width:10%"&gt;End time&lt;/th&gt;
                          &lt;th style="width:10%"&gt;Fee (EUR)&lt;/th&gt;
                          &lt;th style="width:10%"&gt;Status&lt;/th&gt;
                          &lt;th style="width:15%"&gt;Student&lt;/th&gt;
  
                          &lt;th style="width:16%"&gt;Action&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      @foreach ($lessons as $lesson)
                          &lt;tr class="d-flex"&gt;
                              &lt;td style="width:19%"&gt;{{$lesson-&gt;date()}}&lt;/td&gt;
                              &lt;td style="width:10%"&gt;{{$lesson-&gt;startTime()}}&lt;/td&gt;
                              &lt;td style="width:10%"&gt;{{$lesson-&gt;duration()}}&lt;/td&gt;
                              &lt;td style="width:10%"&gt;{{$lesson-&gt;endTime()}}&lt;/td&gt;
                              &lt;td style="width:10%"&gt;{{$lesson-&gt;fee}}&lt;/td&gt;
                              &lt;td style="width:10%"&gt;{{$lesson-&gt;status}}&lt;/td&gt;
                              &lt;td style="width:15%"&gt;{{$lesson-&gt;user-&gt;name?? ''}}&lt;/td&gt;
  
                              &lt;td style="width:16%"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      @endforeach
                      &lt;div id="createBtnDiv"&gt;
                          &lt;tr class="d-flex"&gt;
                              &lt;td style="width:100%; text-align:center"&gt;
                                  &lt;button type="button" id="createBtn" class="btn btn-primary"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; Add a new lesson&lt;/button&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/div&gt;
                          &lt;form id="createForm" style="display:none" action="{{route('admin.lessons.store', ['admin_username' =&gt; $admin-&gt;username])}}" method="post"&gt;
                              @csrf
                              &lt;tr class="d-flex"&gt;
                                  &lt;td style="width:19%;"&gt;
                                      &lt;div class="date" id="datepicker" data-target-input="nearest" style="position:relative;"&gt;
                                          &lt;input type="text" id="datePickerInput" class="form-control datePicker datetimepicker-input{{ $errors-&gt;has('date') ? ' is-invalid' : '' }}" data-toggle="datetimepicker" data-target="#datepicker" name="date"/&gt; 
                                      &lt;/div&gt;
                                      @if ($errors-&gt;has('date'))
                                          &lt;span class="invalid-feedback" role="alert"&gt;
                                              &lt;strong&gt;{{ $errors-&gt;first('date') }}&lt;/strong&gt;
                                          &lt;/span&gt;
                                      @endif     
                                  &lt;/td&gt;
                                  &lt;td style="width:10%"&gt;   
                                      &lt;div class="date" id="startTimePicker" data-target-input="nearest" style="position:relative;"&gt;
                                          &lt;input type="text" id="startTimePickerInput" class="form-control startTimePicker datetimepicker-input{{ $errors-&gt;has('start_time') ? ' is-invalid' : '' }}" data-toggle="datetimepicker" data-target="#startTimePicker" name="start_time"/&gt;      
                                      &lt;/div&gt;
                                      @if ($errors-&gt;has('start_time'))
                                          &lt;span class="invalid-feedback" role="alert"&gt;
                                              &lt;strong&gt;{{ $errors-&gt;first('start_time') }}&lt;/strong&gt;
                                          &lt;/span&gt;
                                      @endif
                                  &lt;/td&gt;
                                  &lt;td style="width:10%"&gt;
                                      &lt;select id="duration" class="form-control duration" name="duration"&gt;
                                          &lt;option selected&gt;60&lt;/option&gt;
                                          &lt;option&gt;45&lt;/option&gt;
                                          &lt;option&gt;30&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/td&gt;
                                  &lt;td style="width:10%"&gt;
                                      &lt;input class="form-control" id="endTimePicker" type="text" value="" placeholder="" disabled&gt;
                                  &lt;/td&gt;
                                  &lt;td style="width:10%"&gt;
                                      &lt;input class="form-control" id="fee" name="fee" type="text" value="{{old('fee')?? $admin-&gt;adminSetting-&gt;fee}}"&gt;
                                      @if ($errors-&gt;has('fee'))
                                          &lt;span class="invalid-feedback" role="alert"&gt;
                                              &lt;strong&gt;{{ $errors-&gt;first('fee') }}&lt;/strong&gt;
                                          &lt;/span&gt;
                                      @endif
                                  &lt;/td&gt;
                                  &lt;td style="width:10%"&gt;&lt;/td&gt;
                                  &lt;td style="width:15%"&gt;&lt;/td&gt;
  
                                  &lt;td style="width:16%"&gt;
                                      &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                                  &lt;/td&gt;   
                              &lt;/tr&gt;
                          &lt;/form&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
  
  
  
  
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  @endsection
  
  @section('javascript')
  
      &lt;script&gt;
  
          $(document).on('click','#createBtn', function() {
              console.log('clicked');
              $('#createBtnDiv').hide();
              $('#createForm').show();
          });
  
  
  
          var startTime = moment();
  
          var duration = $('select.duration').children('option:selected').val();
  
          var endTime = moment().add(duration, 'm').format('HH:mm');
  
          $('#endTimePicker').val(endTime);
  
  
  
          $(function () {
                  $('#datepicker').datetimepicker({
                      format: 'ddd DD.MM.YYYY',
                      useCurrent: false,
                      defaultDate: moment()
  
                  });
                  $('#datepicker').on("change.datetimepicker", function (e) {
  
                      if (e.date == undefined) {
  
                          $('input.datePicker').val(startTime.format('DD.MM.YYYY'));
                      } 
                  })
              });
  
          $(function () {
              $('#startTimePicker').datetimepicker({
                  format: 'HH:mm',
                  useCurrent: false,
                  defaultDate: moment()
  
              });
              $('#startTimePicker').on("change.datetimepicker", function (e) {
  
                  if (e.date == undefined) {
  
                      $('input.startTimePicker').val(startTime.format('HH:mm'));
                  } else {
                      startTime = e.date;
                  }
                  duration = $('select.duration').children('option:selected').val();
                  endTime = startTime.add(duration, 'm').format('HH:mm');
                  $('#endTimePicker').val(endTime);
  
              })
          });
          $(function () {
  
              $('#duration').on("change", function (e) {
                  startTime = $('#startTimePicker').datetimepicker('viewDate')
                  duration = $(this).val();
                  endTime = startTime.add(duration, 'm').format('HH:mm');
                  $('#endTimePicker').val(endTime);
  
              })
          });
      &lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>EDIT: Now I have put the form outside of the table and I intend to populate the hidden inputs through jquery. but still I can't hide the tr containing the input fields??</p>
  
  <pre><code>@extends('layouts.app')
  
  @section('content')
  
      &lt;div class="col-md-10 offset-md-1"&gt;
          &lt;div class="row justify-content-center"&gt;
              &lt;table class="table"&gt;
                  &lt;thead&gt;
                      &lt;tr class="d-flex"&gt;
                          &lt;th style="width:19%"&gt;Date&lt;/th&gt;
                          &lt;th style="width:10%"&gt;Start time&lt;/th&gt;
                          &lt;th style="width:10%"&gt;Duration (min)&lt;/th&gt;
                          &lt;th style="width:10%"&gt;End time&lt;/th&gt;
                          &lt;th style="width:10%"&gt;Fee (EUR)&lt;/th&gt;
                          &lt;th style="width:10%"&gt;Status&lt;/th&gt;
                          &lt;th style="width:15%"&gt;Student&lt;/th&gt;
  
                          &lt;th style="width:16%"&gt;Action&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody &gt;
                      @foreach ($lessons as $lesson)
                          &lt;tr class="d-flex"&gt;
                              &lt;td style="width:19%"&gt;{{$lesson-&gt;date()}}&lt;/td&gt;
                              &lt;td style="width:10%"&gt;{{$lesson-&gt;startTime()}}&lt;/td&gt;
                              &lt;td style="width:10%"&gt;{{$lesson-&gt;duration()}}&lt;/td&gt;
                              &lt;td style="width:10%"&gt;{{$lesson-&gt;endTime()}}&lt;/td&gt;
                              &lt;td style="width:10%"&gt;{{$lesson-&gt;fee}}&lt;/td&gt;
                              &lt;td style="width:10%"&gt;{{$lesson-&gt;status}}&lt;/td&gt;
                              &lt;td style="width:15%"&gt;{{$lesson-&gt;user-&gt;name?? ''}}&lt;/td&gt;
  
                              &lt;td style="width:16%"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      @endforeach
  
                          &lt;tr class="d-flex" id ="createBtnTr"&gt;
                              &lt;td style="width:100%; text-align:center"&gt;
                                  &lt;button type="button" id="createBtn" class="btn btn-primary"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; Add a new lesson&lt;/button&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  
  
                              &lt;tr class="d-flex" style="display:none"&gt;
                                  &lt;td style="width:19%;"&gt;
                                      &lt;div class="date" id="datepicker" data-target-input="nearest" style="position:relative;"&gt;
                                          &lt;input type="text" id="datePickerInput" class="form-control datePicker datetimepicker-input{{ $errors-&gt;has('date') ? ' is-invalid' : '' }}" data-toggle="datetimepicker" data-target="#datepicker"/&gt; 
                                      &lt;/div&gt;
                                      @if ($errors-&gt;has('date'))
                                          &lt;span class="invalid-feedback" role="alert"&gt;
                                              &lt;strong&gt;{{ $errors-&gt;first('date') }}&lt;/strong&gt;
                                          &lt;/span&gt;
                                      @endif     
                                  &lt;/td&gt;
                                  &lt;td style="width:10%"&gt;   
                                      &lt;div class="date" id="startTimePicker" data-target-input="nearest" style="position:relative;"&gt;
                                          &lt;input type="text" id="startTimePickerInput" class="form-control startTimePicker datetimepicker-input{{ $errors-&gt;has('start_time') ? ' is-invalid' : '' }}" data-toggle="datetimepicker" data-target="#startTimePicker"/&gt;      
                                      &lt;/div&gt;
                                      @if ($errors-&gt;has('start_time'))
                                          &lt;span class="invalid-feedback" role="alert"&gt;
                                              &lt;strong&gt;{{ $errors-&gt;first('start_time') }}&lt;/strong&gt;
                                          &lt;/span&gt;
                                      @endif
                                  &lt;/td&gt;
                                  &lt;td style="width:10%"&gt;
                                      &lt;select id="duration" class="form-control duration"&gt;
                                          &lt;option selected&gt;60&lt;/option&gt;
                                          &lt;option&gt;45&lt;/option&gt;
                                          &lt;option&gt;30&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/td&gt;
                                  &lt;td style="width:10%"&gt;
                                      &lt;input class="form-control" id="endTimePicker" type="text" value="" placeholder="" disabled&gt;
                                  &lt;/td&gt;
                                  &lt;td style="width:10%"&gt;
                                      &lt;input class="form-control" id="feeInput" type="text" value="{{old('fee')?? $admin-&gt;adminSetting-&gt;fee}}"&gt;
                                      @if ($errors-&gt;has('fee'))
                                          &lt;span class="invalid-feedback" role="alert"&gt;
                                              &lt;strong&gt;{{ $errors-&gt;first('fee') }}&lt;/strong&gt;
                                          &lt;/span&gt;
                                      @endif
                                  &lt;/td&gt;
                                  &lt;td style="width:10%"&gt;&lt;/td&gt;
                                  &lt;td style="width:15%"&gt;&lt;/td&gt;
  
                                  &lt;td style="width:16%"&gt;
                                      &lt;button type="button" id="submitBtn" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                                  &lt;/td&gt;   
                              &lt;/tr&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
  
  
  
  
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;form id="createForm" action="{{route('admin.lessons.store', ['admin_username' =&gt; $admin-&gt;username])}}" method="post"&gt;
          @csrf
          &lt;input type="hidden" name="date"&gt;
          &lt;input type="hidden" name="start_time"&gt;
          &lt;input type="hidden" name="duration"&gt;
          &lt;input type="hidden" name ="fee"&gt;
      &lt;/form&gt;
  
  
  @endsection
  
  @section('javascript')
  
      &lt;script&gt;
  
          $(document).on('click','#createBtn', function() {
  
              $('#createBtnTr').hide();
  
          });
  
  
  
          var startTime = moment();
  
          var duration = $('select.duration').children('option:selected').val();
  
          var endTime = moment().add(duration, 'm').format('HH:mm');
  
          $('#endTimePicker').val(endTime);
  
  
  
          $(function () {
                  $('#datepicker').datetimepicker({
                      format: 'ddd DD.MM.YYYY',
                      useCurrent: false,
                      defaultDate: moment()
  
                  });
                  $('#datepicker').on("change.datetimepicker", function (e) {
  
                      if (e.date == undefined) {
  
                          $('input.datePicker').val(startTime.format('DD.MM.YYYY'));
                      } 
                  })
              });
  
          $(function () {
              $('#startTimePicker').datetimepicker({
                  format: 'HH:mm',
                  useCurrent: false,
                  defaultDate: moment()
  
              });
              $('#startTimePicker').on("change.datetimepicker", function (e) {
  
                  if (e.date == undefined) {
  
                      $('input.startTimePicker').val(startTime.format('HH:mm'));
                  } else {
                      startTime = e.date;
                  }
                  duration = $('select.duration').children('option:selected').val();
                  endTime = startTime.add(duration, 'm').format('HH:mm');
                  $('#endTimePicker').val(endTime);
  
              })
          });
          $(function () {
  
              $('#duration').on("change", function (e) {
                  startTime = $('#startTimePicker').datetimepicker('viewDate')
                  duration = $(this).val();
                  endTime = startTime.add(duration, 'm').format('HH:mm');
                  $('#endTimePicker').val(endTime);
  
              })
          });
      &lt;/script&gt;
  @endsection
  </code></pre>