Update price within a box with jquery

Question

I have a page with several boxes containing some information and the price of the product, a URL and a select, when the person select a different option in select the price of the product will be changed. I searched the internet and found some examples that could work, however it worked only in a block.

For example on this server 01, it has this value of 30 and a URL, but when selecting the linux option this value change and also the URL.

.boxe{
float:left;
border: solid 1px #ccc;
margin:15px;
padding:15px;
min-width:135px;
text-align:center
}
.boxe .valor{
font-size:18px;
margin: 15px 0;
font-weight:700;
}

.boxe .url{
display:block;
margin-top:15px;
}

<div class="boxe">
    <span class="nomePtoduto">
        Servidor 01
    </span>
    <div class="valor" data-vl="30" data-vl-w="35">30</div>
    <select>
        <option>Linux</option>
        <option>Windows</option>
    </select>
    <span class="url">
        <a href="linux.html" data-url="linux.html" data-url-w="windows.html">Comprar</a>
    </span>
</div>
<div class="boxe">
    <span class="nomePtoduto">
        Servidor 02
    </span>
     <div class="valor" data-vl="45" data-vl-w="50">45</div>
    <select>
        <option>Linux</option>
        <option>Windows</option>
    </select>
    <span class="url">
         <a href="linux.html" data-url="linux.html" data-url-w="windows.html">Comprar</a>
    </span>
</div>
<div class="boxe">
    <span class="nomePtoduto">
        Servidor 03
    </span>
     <div class="valor" data-vl="50" data-vl-w="55">50</div>
    <select>
        <option>Linux</option>
        <option>Windows</option>
    </select>
    <span class="url">
         <a href="linux.html" data-url="linux.html" data-url-w="windows.html">Comprar</a>
    </span>
</div>

Answer 1

Quite simply this, trigger an event by changing the OS, and capture the url and value, fill in the data:

$(document).on('change','.SO-select',function(){
  var val = $(this).val();
  var box = $(this).find(':selected').data('box');
  var url = $(this).find(':selected').data('url')

  $('.SO-valor[data-box="'+box+'"').html(val);
  $('.SO-link[data-box="'+box+'"').attr('href',url)
});

.boxe{
float:left;
border: solid 1px #ccc;
margin:15px;
padding:15px;
min-width:150px;
text-align:center
}
.boxe .valor{
font-size:18px;
margin: 15px 0;
font-weight:700;
}

.boxe .url{
display:block;
margin-top:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxe">
    <span class="nomePtoduto">
        Servidor 01
    </span>
    <div class="SO-valor" data-box='1'>30</div>
    <select class='SO-select'>
        <option value='30' data-box='1' data-url='url-linux'>Linux</option>
        <option value='50' data-box='1'data-url='url-windows'>Windows</option>
    </select>
    <span class="url">
        <a href="linux.html" class="SO-link" data-box='1'>Comprar</a>
    </span>
</div>
<div class="boxe">
    <span class="nomePtoduto">
        Servidor 02
    </span>
    <div class="SO-valor" data-box='2'>45</div>
    <select class="SO-select">
        <option value='45' data-box='2' data-url='url-linux-2'>Linux</option>
        <option value='55' data-box='2' data-url='url-windows-2'>Windows</option>
    </select>
    <span class="url">
        <a href="linux.html" class="SO-link" data-box='2'>Comprar</a>
    </span>
</div>
<div class="boxe">
    <span class="nomePtoduto">
        Servidor 03
    </span>
    <div class="SO-valor" data-box='3'>50</div>
    <select class="SO-select">
        <option value='40' data-box='3' data-url='url-linux-3'>Linux</option>
        <option value='50'  data-box='3' data-url='url-windows-3'>Windows</option>
    </select>
    <span class="url">
        <a href="linux.html" class="SO-link" data-box='3'>Comprar</a>
    </span>
</div>