Get element id and add to JS function options

I am using jquery.timepicker to make a field a time picker. The default functionality it to append the drop down to the window.

I do not like the width of the dropdown and do not wish to set a fixed width, because the widget is being applied to multiple fields that get resized by responsiveness.

I need the widget (dropdown) to be the same width as the input it applies to. My first thought is to append the widget to the same parent and the input.

My question is there a way to get the id of the element that has triggered the event and add to the function options?

$(document).ready(function () {
  $('.time').timepicker({
    step: 30,
    appendTo: (e) => {
      console.log(e[0].id,`#${e[0].id}-tp`);
      return `#${e[0].id}-tp`;
    },
  });
  $('#form2').timepicker({
    step: 30,
    appendTo: '#form2-tp'
  });
});

*, *::before, *::after {
    box-sizing: border-box;
}
.input-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 200px;
  position: relative;
  margin-bottom: 10px; 
}
input, .tp {
  width: 100%;
}
.tp .ui-timepicker-wrapper {
  padding: 0 10px;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en-US" class="h-100">
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.14.1/jquery.timepicker.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="input-group">
      <label for="form1">Field 1 (error)</label>
      <input type="text" id="form1" class="time">
      <div id="form1-tp" class="tp"></div>
    </div>
    <div class="input-group">
      <label for="form2">Field 2 (works)</label>
      <input type="text" id="form2">
      <div id="form2-tp" class="tp"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.14.1/jquery.timepicker.min.js"></script>
  </body>
</html>

I have tried to add a function:

$('.time').timepicker({
  step: 30,
  appendTo: (e) => {
    console.log(e[0].id);
  },
});

and the browser console shows the correct element id (along with appendTo errors)

So I thought I could just return the value that I need:

$('.time').timepicker({
  step: 30,
  appendTo: (e) => {
    return `${e[0].id}-timepicker`;
  },
});

but appendTo is viewed as a function.

Short of using and id manually when calling the function i.e. $('#time-element').timepicker({...});, is it possible achieve a string output?

Solution

In the appendTo parameter, the argument is the current input, so push away from it:

$('.time').timepicker({
  step: 30,
  appendTo: e => e.closest('.input-group').find('.tp'),
});

*, *::before, *::after {
    box-sizing: border-box;
}
.input-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 200px;
  position: relative;
  margin-bottom: 10px; 
}
input, .tp {
  width: 100%;
}
.tp .ui-timepicker-wrapper {
  padding: 0 10px;
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.14.1/jquery.timepicker.min.css" rel="stylesheet">
<div class="input-group">
  <label for="form1">Field 1 (error)</label>
  <input type="text" id="form1" class="time">
  <div class="tp"></div>
</div>
<div class="input-group">
  <label for="form2">Field 2 (works)</label>
  <input type="text" id="form2" class="time">
  <div class="tp"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.14.1/jquery.timepicker.min.js"></script>