JSFiddle - React, Tailwind, and code Playground

HTML

<form>
       <fieldset>
          <legend>Destination</legend>
             <label>Destination</label>
             <select id="destination">
               <option value="#sun">Sun</option>
               <option value="#mercuryorbit">Mercury</option>
               <option value="#venusorbit">Venus</option>
               <option value="#earthorbit">Earth</option>
               <option value="#marsorbit">Mars</option>
               <option value="#jupiterorbit">Jupiter</option>
               <option value="#saturnorbit">Saturn</option>
               <option value="#uranusorbit">Uranus</option>
               <option value="#neptuneorbit">Neptune</option>
             </select>
       </fieldset>
    </form>
<form id="speed">
    <label for="sol">Speed</label>
    <select name="sol" id="sol" style="display:block;">
        <option value="1000">1000</option>
        <option value="2000">2000</option>
        <option value="4000">4000</option>
        <option value="8000">8000</option>
        <option value="16000">16000</option>
        <option value="25000">25000</option>
        <option value="50000">50000</option>
        <option value="100000">100000</option>
    </select>
</form>
<span><a id="engage" href="" >Engage</a></span>

JavaScript

$("#destination").on('change', function() {
        $("#engage").prop("href" , this.value);
    });


$(function() {
    $('#engage').bind('click',function(event){
        var speed = $('#sol').val();
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, speed);
        event.preventDefault();
        alert(speed);
    });
});