Create a buffer based on user defined distance and select features on a map

[SRJS4]

I am trying to create a buffer to select features on a map, I want to have a text box, where user can put in distance in miles and when clicked on map, it creates a buffer around that point, with that distance and selects features within the buffer.

I have a codepen sample
https://codepen.io/Jodhpur1/pen/qBGVKdg

where a buffer is created when clicked on the map and features selected within that buffer, but the distance for the buffer is coded to 10 miles.

Thanks in advance for your help

[MatthewDriscoll]

You just need to create an element that when an event happens, like value entered or a button clicked, it passes that value into the part where you have the 10 miles coded.   

Here is an example of something similar I have done.   Example Link

[UndralBatsukh · Accepted solution]

Here is your codepen updated: https://codepen.io/U_B_U/pen/KKLZLMa?editors=1000

[SRJS4]

Thank you @UndralBatsukh  for updating the code