post schedule time input to dropdown

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/carrot-misc/wpposteditor.css">
<h1>
  After
</h1>
<div class="misc-pub-section curtime misc-pub-curtime">
  <span id="timestamp">
	Publish <b>immediately</b></span>
  <a href="#edit_timestamp" class="edit-timestamp hide-if-no-js" role="button" style="display: none;"><span aria-hidden="true">Edit</span> <span class="screen-reader-text">Edit date and time</span></a>
  <fieldset id="timestampdiv" class="hide-if-js" style="display: block;">
    <legend class="screen-reader-text">Date and time</legend>
    <div class="timestamp-wrap"><label><span class="screen-reader-text">Month</span><select id="mm" name="mm">
			<option value="01" data-text="Jan">01-Jan</option>
			<option value="02" data-text="Feb">02-Feb</option>
			<option value="03" data-text="Mar">03-Mar</option>
			<option value="04" data-text="Apr">04-Apr</option>
			<option value="05" data-text="May">05-May</option>
			<option value="06" data-text="Jun">06-Jun</option>
			<option value="07" data-text="Jul">07-Jul</option>
			<option value="08" data-text="Aug" selected="selected">08-Aug</option>
			<option value="09" data-text="Sep">09-Sep</option>
			<option value="10" data-text="Oct">10-Oct</option>
			<option value="11" data-text="Nov">11-Nov</option>
			<option value="12" data-text="Dec">12-Dec</option>
</select></label> <label><span class="screen-reader-text">Day</span><input type="text" id="jj" name="jj" value="03" size="2" maxlength="2" autocomplete="off"></label>, <label><span class="screen-reader-text">Year</span><input type="text" id="aa" name="aa" value="2018" size="4" maxlength="4" autocomplete="off"></label>      @ <label><span class="screen-reader-text">Hour</span><input type="text" id="hh" name="hh" value="06" size="2" maxlength="2"...

Babel + JSX

// in real code im using things like import _map from 'lodash/map';
const _each = _.each;
const _filter = _.filter;
const _includes = _.includes;
const _map = _.map;
const _padStart = _.padStart;
const _range = _.range;
const _reject = _.reject;
const _toNumber = _.toNumber;
const _uniq = _.uniq;
const _flatten = _.flatten;

const padNumber = n => _padStart(n, 2, '0')

function transformMinuteInput({minuteGranularity, defaultMinute}, minuteInput) {
  const optionValues = _uniq(_flatten([defaultMinute, _range(0, 59 + 1, minuteGranularity)]).sort());
  transformInputToDropdown(
    _map(optionValues, padNumber),
    minuteInput
  );
}


function transformHourInput(hourInput) {
  transformInputToDropdown(
    _map(_range(0, 23 + 1), padNumber),
    hourInput
  );
}

function transformInputToDropdown(dropdownValues, input) {
  const dropdown = $(document.createElement('select'));
  dropdown.css('width', '3.1em');

  _each(
    _reject(
      _filter(input[0].attributes, 'specified'),
      attr => _includes(['size', 'maxlength', 'value', 'type'], attr.name)
    ),
    attr => dropdown.attr(attr.name, attr.value)
  );

  _each(
    _map(dropdownValues, val => $(document.createElement('option'))
      .prop('selected', val === input.val())
      .val(val)
      .text(val)),
    e => dropdown.append(e)
  );

  input.replaceWith(dropdown);
}

function enforceTimeInputFieldGranularity({minuteGranularity}, fieldEl) {

  const hourField = fieldEl.find('input[type=text]#hh');
  const minuteField = fieldEl.find('input[type=text]#mn');

  if (hourField.length < 1 || minuteField.length < 1) {
    return;
  }

  transformHourInput(hourField);

  const defaultMinute = _toNumber(minuteField.val());
  transformMinuteInput({minuteGranularity, defaultMinute}, minuteField);
}

$(document).ready(function () {
  // change scheduled post granularity
  var selectors = ['.misc-pub-section #timestampdiv'].join(', ');
  var targets = $(selectors);
  targets.each(function (i, el) {
   ...