Add options to Bootstrap dropdown using Input Text Box

Issue

I've searched all over but can't find to work the way I want it. Basically, I have a input group dropdown with Twitter Bootstrap

          <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">
                    <button tabindex="-1" class="btn btn-default" type="button">Add</button>
                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>

I want to append options to the dropdown list when text is entered into the input box and the "Add" button is clicked. How can this be done using JQuery?

Here is the JSFiddle with the working dropdown: https://jsfiddle.net/qt3p6am0/2/

Solution

$('.input-group .dropdown-menu.pull-right').last().append(`<li><a href="#">New link</a></li>`)

Answered By - Mostafa Hana