Dropdown won't close on select (javascript)

Question

I'm trying to create a number of dropdowns on one page that choose radio buttons based on the selection from that dropdown.

It's half working, the radio button IS changing per choice, however I can't get the dropdown to close and retain the selector when chosen. Wondering if it's to do with the JS - fiddle below

Fiddle: https://jsfiddle.net/8b069fj2/

$("input").on("change", function () {
  var inputName = this.name;
  $("#select-' + inputName + '-btn").html(this.checked ? this.value : "");
});

$(".js-option").on("click", function () {
  $(this).parent().find("ul").toggleClass("js-drop");
});

Answer 1

you are mssing the click handler for list elements so the following worked for me:

$('input').on('change', function() {
  var inputName = this.name;
  console.log(inputName);
  var selector = '#select-' + inputName + '-btn';
  $(selector).html(this.checked ? this.value : '');
});

$('.js-option').on('click', function() {
  $(this).parent().find('ul').toggleClass("js-drop");
});

  $('li .js-option').on('click',function(){
    $(this).closest('ul').toggleClass("js-drop");
  })