conditional dropdowns with stimulus and jquery (bad approach)

_form.html.haml

= simple_form_for @valuation, html: { data: { controller: 'valuation' } } do |f|
  = f.input :tenure_id, collection: Tenure.all, input_html: { id: 'tenure_dropdown', data: { action: 'change->valuation#toggleTenure' } }
  #tenure
    = f.input :is_remaining_term_less_than_85_years, as: :select, input_html: { id: 'timeleft_dropdown', data: { action: 'change->valuation#toggleTimeleft' } }
  #timeleft
    = f.input :remaining_term_details

valuation_controller.js

import { Controller } from 'stimulus'
import $ from 'jquery'
export default class extends Controller {
  connect () {
    this.toggleTenure()
    this.toggleTimeleft()
  }

  toggleTenure () {
    const type = $('#tenure_dropdown').find('option:selected').text()
    const tenure = $('#tenure')
    if (type === 'Long Leasehold') {
      tenure.show()
    } else {
      tenure.hide()
    }
  }

  toggleTimeleft () {
    const type = $('#timeleft_dropdown').find('option:selected').text()
    const timeleft = $('#timeleft')
    if (type === 'Yes') {
      timeleft.show()
    } else {
      timeleft.hide()
    }
  }
}