Changing an input fields value in jQuery on click
<p>My site searches the Spotify Library and returns a list of results. The idea is that users can click on one of the results and have it added to a playlist which will in turn be posted as part of a form submit. The code below adds the clicked song to a .selected-list container, then adds a hidden input to the DOM with the value of the Spotify song href.</p>

<p>This all works, but each time I click a new song and a new input is added, the href of all the previous added inputs changes too. I know that it's because I am identifying the .track which all the inputs have, but I can't quite figure out how to go about it.    </p>

<pre><code>$('.spotify-result').click(function() {
        $(this).clone().appendTo($('.selected-list'));
        $('.submit-spotify').before('&lt;input type="hidden" id="track_href" class="track" value="" name="track_href" /&gt;');
        $('.track').val($('.track-href', this).text());
});
</code></pre>
