Why won't a script added dropdown box update the text in the box to the selection chosen

Question

I have a dropdown box and two input fields. when I click the dropdown box and select a dropdown option the text in the dropdown box changes to the text of the selection I clicked on.

I also have a function that creates another row that's identical to the dropdown box and two input fields mentioned above but when this row has been created the dropdown box text does not change.

I am at a complete loss as to why the 2nd (or 3rd,4th ...) dropdown box doesn't change its text. I looked at changing the way it is created to include an iterated name and alter the function to take in the name of the generated menu but that quickly became cumbersome. any help would be appreciated.

The HTML for the fields (the function to generate new fields works fine and just spits out the below HTML again)

<div class="row">
            <div class="form-group">

                <div class="col-lg-2">
                    <div class="dropdown">
                        <button onclick="drop_down_selection()" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span id="dropdown_title"> Payment type </span><span class="caret"></span></button>
                        <ul class="dropdown-menu" id="dropdown-menu">
                            <li><a>Progress payment</a></li>
                            <li><a>legal fees</a></li>
                            <li><a>Loss Adjustor fees</a></li>
                        </ul>
                    </div>
                </div>
            </div>

                <div class="col-lg-3">
                    <input type="text" class="form-control"
                        name="paymentNote" placeholder="Enter source of data"  />
                </div>

                <div class="col-lg-3" id="figureamount">
                    <input type="number" step="0.01" class="form-control" 
                        name="paymentAmount" placeholder="Amount"  />
                </div>

            </div><br>

the function to change the text of the dropdown menu when clicked

    $('#dropdown-menu li').click( function(e) {
        $('#dropdown_title').html($(this).find('a').html());
    });

Any Help would be great.

edit

I checked out the answer Event binding on dynamically created elements?

This hasn't really helped (more to do with my lack of understanding i suspect)

I have changed the Html to

            <div class="form-group">
            <div id="paymentFigureFields">
                <div class="row">

                    <div class="col-lg-2">
                        <div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span id="dropdown_title"> Payment type </span><span class="caret"></span></button>
                            <ul class="dropdown-menu" id="dropdown-menu">
                                <li><a>Progress payment</a></li>
                                <li><a>legal fees</a></li>
                                <li><a>Loss Adjustor fees</a></li>
                            </ul>
                        </div>
                    </div>


                    <div class="col-lg-3">
                        <input type="text" class="form-control"
                            name="paymentNote" placeholder="Enter source of data"  />
                    </div>

                    <div class="col-lg-3" id="figureamount">
                        <input type="number" step="0.01" class="form-control" 
                            name="paymentAmount" placeholder="Amount"  />
                    </div>
                </div>
            </div>
        </div>

I have changed the function to change to text to

    <script type="text/javascript">

    $("#paymentFigureFields").on('click', 'li', function(){

        $("#dropdown_title").html($(this).find('a').html());

    });
</script>

Now when I generate new drop down boxes, the first one works as expected (i click the drop down menu > select my option > the text of the dropdown menu changes to what I selected)

but when a new drop down box is created, I click the dropdown box > click the option I want > then the text of the 1st drop down box changes.

Do you have any suggestions?

again, thanks for any help.

Edit 2

This is the code that generates the fields with the drop down box that should change its text when an option is clicked on.

        function add_payment_figure_fields() {

            var objTo = document.getElementById("paymentFigureFields");
            var divtest = document.createElement("div");
            divtest.innerHTML = '<div class="row"><div class="col-lg-2"><div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span id="dropdown_title"> Payment type </span><span class="caret"></span></button><ul class="dropdown-menu" id="dropdown-menu"><li><a>Progress payment</a></li><li><a>legal fees</a></li><li><a>Loss Adjustor fees</a></li></ul></div></div><div class="col-lg-3"><input type="text" class="form-control" name="paymentNote" placeholder="Enter source of data"  /></div><div class="col-lg-3" id="figureamount"><input type="number" step="0.01" class="form-control" name="paymentAmount" placeholder="Amount"  /></div></div><br>';
            objTo.appendChild(divtest)

    }