Having trouble targeting a single input among multiple elements with the same class name (jQuery)

I have a page with a list of li elements, each called .section. The page starts with just one section, but the user can add more with a click. Each section has a dropdown called .wip-location and three input fields called .section-number, .section-name, and .section-description. (The -number and -description inputs are irrelevant but I included them here just in case they are causing problems.)

Every time the dropdown is changed, I’d like the selected text to get filled into the .section-name input.

This works the first time (when there is only one .section, .wip-location, and .section-name on the page), but as soon as the user adds more .sections, it appears that Jquery is unable to figure out which element to act upon, and no inputs are filled.


<li class="section">
<label class="col-sm-2 text-sm-right">Section Name</label>