Question

Take a look on this code, what I wrote: http://pastebin.com/TZpUAWpA, and this jQuery, what is basically copy pasted from jquery docs: http://pastebin.com/Ecu0T5Kv

The problem is that, I want to make so, that every <p class="java"></p> shows selected value of previous select box.

At the moment, it works only for the bottom one, and bottom selected value applies to all <p> tags.

Answer 1

This does work, hope that its what you are looking for:

FIDDLE

$(document).ready(function(){
     $('.parent').each(function(){
            var theVal = $(this).find('select option:selected').html();
            $(this).find('p').html(theVal);
        });
    $('.single').change(function(){
        $('.parent').each(function(){
            var theVal = $(this).find('select option:selected').html();
            $(this).find('p').html(theVal);
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="inputArea">
    <div class="parent">
    <select class="single"><option selected value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option selected value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
   </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option selected value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option selected value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option selected value="saistitajvards">Saistītājvārds</option>
    </select><input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    
</div>