Fill in multiple text boxes based on selection made from dropdown info pulled in via jquery/ajax webservice

I am in need of a little assistance. I have been trying to figure out what the best way to approach the situation, not to mention I am a noob when it comes to C#, JQuery, Ajax and asp.net so bare with me as I try to explain.

As it stands now, I have two dynamically created select boxes with several options(More select boxes can be added if needed and typically users create a minimum of 5-10)-- we can call the two boxes Select 1 and Select 2. These boxes are populated based on the fill select function in JQuery. Select 2 is dependent upon Select 1 in other words once an option is chosen from Select1; Select2 gets populated with the appropriate data. See function below;

FillSelect($smelterMetalSelect, "GetMetals", {}, "", true, false, "metalId", "name", answer != undefined ? answer.metal_id : "", function () {
                    FillSelect($smelterSelect, "GetSmeltersByMetal", { metalId: answer.metal_id }, "", true, false, "smelterId", "name", answer.smelterId, function () {
                        hideShowDetail($smelterSelect);
                    });
                });

Now once an option is selected in the Select- +2 box a div gets appended to the selection with multiple input and radio buttons. See code below (as you can see each append adds either an input box or a radio button with the same class);

$smelterDiv.append($smelter);
            var $smelterDetailDiv = $("<div class='smelter-detail-div'></div>");
            var $smelterName = $('<br><span class="smelter-name-span smelter-detail" ><label class="smelter-detail-label">Name: </label><input class="smelter-name ui-widget-content " /></span>');$smelterDetailDiv.append($smelterName);
            var $smelterCountry = $('<span class="smelter-country-span smelter-detail" ><label class="smelter-detail-label">Country: </label><input class="smelter-country ui-widget-content " /></span>');$smelterDetailDiv.append($smelterCountry);
            var $smelterId = $('<span class="smelter-id-span smelter-detail"><label class="smelter-detail-label">Smelter Identification: </label><input class="smelter-id ui-widget-content" /></span>');$smelterDetailDiv.append($smelterId);
            var $smelterIdSource = $('<span class="smelter-id-source-span smelter-detail"><label class="smelter-detail-label">Source of Smelter Identification Number: </label><input class="smelter-id-source ui-widget-content" /></span>');$smelterDetailDiv.append($smelterIdSource);
            var $smelterStreet = $('<span class="smelter-street-span smelter-detail" ><label class="smelter-detail-label">Smelter Street: </label><input class="smelter-street ui-widget-content" /></span>');$smelterDetailDiv.append($smelterStreet);
            var $smelterCity = $('<span class="smelter-city-span smelter-detail"><label class="smelter-detail-label">Smelter City: </label><input class="smelter-city ui-widget-content"/></span>');$smelterDetailDiv.append($smelterCity);
            var $smelterFacilityLocation = $('<span class="smelter-facility-span smelter-detail"><label class="smelter-detail-label">Smelter Facility Location State/Provice: </label><input class="smelter-facility ui-widget-content" /></span>');$smelterDetailDiv.append($smelterFacilityLocation);
            var $smelterContactName = $('<span class="smelter-contact-name-span smelter-detail"><label class="smelter-detail-label">Smelter Contact Name: </label><input class="smelter-contact-name ui-widget-content" /></span>');$smelterDetailDiv.append($smelterContactName);
            var $smelterContactEmail = $('<span class="smelter-contact-email-span smelter-detail"><label class="smelter-detail-label">Smelter Contact Email: </label><input class="smelter-contact-email ui-widget-content" /></span>');$smelterDetailDiv.append($smelterContactEmail);
            var $smelterNextSteps = $('<span class="smelter-next-steps-span smelter-detail"><label class="smelter-detail-label">Proposed Next Steps: </label><input class="smelter-next-steps ui-widget-content" /></span>');$smelterDetailDiv.append($smelterNextSteps);
            var $smelterMineName = $('<span class="smelter-mine-name-span smelter-detail"><label class="smelter-detail-label">Name of mine(s) or if recycled or scrap source enter recycled or scrap: </label><input class="smelter-mine-name ui-widget-content" /></span>');$smelterDetailDiv.append($smelterMineName);
            var $smelterMineCountry = $('<span class="smelter-mine-county-span smelter-detail"><label class="smelter-detail-label">Location (country) of mine(s) or if recycled or scrap source enter recycled or scrap: </label><input class="smelter-mine-country ui-widget-content" /></span>');$smelterDetailDiv.append($smelterMineCountry);
            var $smelterRecycledScrap = $('<span class="smelter-recycled-scrap-span"><label><br>Does 100% of the smeleters feedstock originate from recycled or scrap sources: </label><input type="radio" name="allRecycleScrap" value="Yes" class="smelter-recycled-scrap ui-widget-content" />Yes <input type="radio" name="allRecycleScrap" value="No" class="smelter-recycled-scrap" />No</span>');$smelterDetailDiv.append($smelterRecycledScrap);
            var $smelterComments = $('<br><span class="smelter-comments-span">Comments: <textarea class="smelter-comments ui-widget-content"></textarea></span>');$smelterDetailDiv.append($smelterComments);

Here is what a snippet of the return data and what it looks like;

0: Object
__type: "WebService+Smelter"
name: "Avon Specialty Metals Ltd"
showDetail: "Detail"
smelterCitys: "Gloucester"
smelterCountry: "United Kingdom"
smelterFacilityLocation: "Gloucestershire"
smelterId: 12
smelterSourceId: "CFSI"
standardSmelterName: "Avon Specialty Metals Ltd"

What I would like to do is to populate the input boxes with the information above. There are two issues I am faced with one, is I can only get it to populate the number of the said row (stored in the database) like this (see code below)however I would like to show the string instead of the row number;

$(".smelter-select").change(function () {
                            var selectedval = $(this).find("option:selected").val(answer.metal_id);
                            //retrieve records based on selectedval
                            //fill inputs and radio buttons$('.smelter-name').val(selectedval);

                        })

Lastly when It populates the text box it fills in all the text boxes with that given class and I only want to populate the div associated with that particular select box as each select box should be populated with the appropriate data.

Any help is welcome.