jQuery connect two elements with different ids

I have this structure HTML set up...

<div id="TemplateSettings_TextSettings_StoreTitle_Font_preview">
<select name="TemplateSettings_TextSettings_StoreTitle_Font"开发者_Go百科 id="TemplateSettings_TextSettings_StoreTitle_Font" class="valid">
<option selected="yes">Arial</option>
<option>Arial Black</option>
<option>Bookman Old Style</option>
<option>Comic Sans MS</option>
</select>
</div>

<div id="TemplateSettings_TextSettings_StoreTitle_Font_preview">
<span style="font-family: Impact;">This is preview text.</span>
</div>

What I need to do is when changing the font on <select> is to dynamically change the font-family on the <span>. Now I can do that on a single section such as this. My problem is that there is a list of that html format so I need to be able to connect/create an association between that <select> and it's 'sibling' <span>.

How can I connect these two and have that <select> only impact that <span> so that if a list of that html format is done, it works the same.

The issue I keep having is that the above html format is listed as such so if i change the font on the <select> and it effects all listed <span>s.

---

First of all, you have two divs with an identical ID. This is invalid. ID's need to be unique. So if you ditch the middle part of your code like so:

<div id="TemplateSettings_TextSettings_StoreTitle_Font_preview">
<select name="TemplateSettings_TextSettings_StoreTitle_Font" id="TemplateSettings_TextSettings_StoreTitle_Font" class="valid">
<option selected="yes">Arial</option>
<option>Arial Black</option>
<option>Bookman Old Style</option>
<option>Comic Sans MS</option>
</select>
<span style="font-family: Impact;">This is preview text.</span>
</div>

Then you can use this to change your font-family:

$(document).ready(function(){
    $("select").change(function() {
        $(this).next("span").css("font-family",$(this).val());
    });
});

As a fiddle... http://jsfiddle.net/7B7hT/