Save four separate values to four hidden fields

Currently I have four separate sections: Sole, Collar, Lining and Tongue. In each section there is the option of selecting a material, the code below is an example of two of the sections.

<div class="sole_panel container active">
    <h3>sole</h3>
    <div id="sole_leather" class="material-btn">leather</div>
    <div id="sole_suade" class="material-btn">suade</div>
    <div id="sole_nubuck" class="material-btn">nubuck</div>
</div>
<div class="collar_panel container">
    <h3>collar</h3>
    <div id="collar_leather" class="material-btn">leather</div>
    <div id="collar_suade" class="material-btn">suade</div>
    <div id="collar_nubuck" class="material-btn">nubuck</div>
</div>

I have created the divs so that when they are clicked on it takes the id and passes it to the value of a hidden input tag.

<input id="sole" class="material-value" type="hidden" value="sole_leather">

The problem I am having is that if I select leather for the Sole section for example it populates all four hidden inputs like in the code below. Is there a simple way to have the hidden input only apply to the section it relates to?

<div class="sole_panel container active"></div>
<input id="sole" class="material-value" type="hidden" value="sole_leather">
<div class="collar_panel container"></div>
<input id="collar" class="material-value" type="hidden" value="sole_leather">
<div class="lining_panel container"></div>
<input id="lining" class="material-value" type="hidden" value="sole_leather">
<div class="tongue_panel container"></div>
<input id="tongue" class="material-value" type="hidden" value="sole_leather">

I’m also using JavaScript to loop over an array of panels and materials

panelArray     = ['sole','collar','lining','tongue'];
materialArray  = ['leather','suade','nubuck'];

//loop over array to create selectors
for (x = 0; x < panelArray.length; x++) {

    mtr = '';
    clr = '';               
    var segments = panelArray[x];

    //loop over materials 
    for (y = 0; y < materialArray.length; y++) {

        var material = materialArray[y];
        //console.log(material);

        mtr += '<div class="material-btn" id="' + segments + '_' + material + '">' + material + '</div>';
    }                 

    container += '<div class="' + segments + '_panel container"><h3>' + segments + '</h3>';
    container +=        mtr;
    container +=   '<div class="colour-container">';
    container +=        clr;
    container +=   '</div>';
    container += '</div>';
    container += '<input id="' + segments + '" class="material-value" type="hidden">';

}

below is the code that passes the value to the hidden field

$('.material-btn').on('click', function() {              

    $('.material-btn').removeClass('select');
    $(this).addClass('select');

    // passes material type selction to hidden field
    var value = $(this).attr('id');    
    var result = $('.material-value').attr('value', value);
    //console.log(result);
});

Solution

Try this:

jsFiddle Demo

$('.material-btn').click(function(){
    var part = this.id.split('_')[0];
    var matl = this.id.split('_')[1];
    $('#'+part).val(matl);
});

Notes:

(1) Use this.id (pure javascript) instead of $(this).attr('id') only because it is a bit faster, and easier to type. For this example, they would work the same. To do exactly the same with all jQuery: var matl = $(this).attr('id').split('_')[1];

(2) this.id.split('_')[1] takes the id, such as sole_leather, and turns it into an array, splitting the string at each _ char. Therefore, you are left with an array like this: array('sole','leather') -- and the [1] selects the element at position 1 (leather)

(3) To save the material (nubuck) into the part (sole) hidden field, we use the stored variables created in step 2. $('#'+part) becomes $('#sole') - which is the ID of the hidden field for the sole part.

(4) In the jsFiddle demo, the hidden fields were unhidden ONLY so that you can see the values being updated inside the field.

/*
http://stackoverflow.com/questions/30038608/how-would-i-go-about-saving-four-separate-values-to-four-hidden-fields
*/
$('.material-btn').click(function(){
    var part = this.id.split('_')[0];
    var matl = this.id.split('_')[1];
    $('#'+part).val(matl);
});

#hiddenDIVs{width:80%;margin:30px auto;border:1px solid orange;}
.material-value{height:25px;width:60%;margin:5px auto;background:palegoldenrod;padding:2px 5px;}
.material-btn:hover{cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sole_panel container active">
    <h3>sole</h3>
    <div id="sole_leather" class="material-btn">leather</div>
    <div id="sole_suade" class="material-btn">suade</div>
    <div id="sole_nubuck" class="material-btn">nubuck</div>
</div>
<div class="collar_panel container">
    <h3>collar</h3>
    <div id="collar_leather" class="material-btn">leather</div>
    <div id="collar_suade" class="material-btn">suade</div>
    <div id="collar_nubuck" class="material-btn">nubuck</div>
</div>
<div class="sole_panel container active"></div>
<div class="collar_panel container"></div>
<div class="lining_panel container"></div>
<div class="tongue_panel container"></div>
<div id="hiddenDIVs">
    <input id="sole" class="material-value" type="text" value="" /> SOLE<br>
    <input id="collar" class="material-value" type="text" value="" /> COLLAR<br>
    <input id="lining" class="material-value" type="text" value="" /> LINING<br>
    <input id="tongue" class="material-value" type="text" value="" />TONGUE<br>
</div>