How to fill into more than one textbox with data taken from mysql table after dropdown selection

I would like to fill more than one textbox with data taken from mysql table after dropdown selection. I saw this jsfiddle demo and works fine but I need something different. I have the following situation:

<div class="form-group">                            
    <label class="control-label col-sm-2" for="pn_dn">Pn_DN:</label>
    <div class="col-sm-4">
        <select id="pn_dn" name="pn_dn" required>
            <option value="">Seleziona</option>
                <?php 
                    $sql = "SELECT codice, cod_forn, descrizione, package, u_m FROM maglab";
                    $result = $conn->query($sql);
                    if ($result->num_rows > 0) {                                    
                        while($row = $result->fetch_assoc()) {
                            $pn_dn = $row['codice'];
                            $descrizione = $row['descrizione'];
                            $pn_manufacturer = $row['cod_forn'];
                            $package = $row['package'];
                            $u_m = $row['u_m'];
                ?>                                                  
                <option><?php echo $pn_dn; ?></option>
                    <?php } ?>                                                  
            </select>                                   
        </div>
            <?php } ?>
        <label class="control-label col-sm-2" for="description">Descrizione:</label>
        <div class="col-sm-4">
            <textarea class="form-control" rows="3" id="description" name="description" style="width: 100%;"> </textarea>
        </div>                                      
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="pn_manufacturer">Pn_Fornitore:</label>
        <div class="col-sm-4">
            <textarea class="form-control" rows="3" id="pn_manufacturer" name="pn_manufacturer" style="width: 100%;"> </textarea>
        </div>
        <label class="control-label col-sm-2" for="manufacturer">Fornitore:</label>
        <div class="col-sm-4">
            <textarea class="form-control" rows="3" id="manufacturer" name="manufacturer" style="width: 100%;"> </textarea>
        </div>                              
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="package">Package:</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="package" name="package"> </div>
        <label class="control-label col-sm-2" for="u_m">Unità di misura:</label>
        <div class="col-sm-4">
            <input type="u_m" class="form-control" id="u_m" name="u_m" required>
        </div>                          
    </div>

<script type="text/javascript">
    var pn_dn = document.getElementById('pn_dn');
    //var pn_manufacturer = document.getElementById('<?php echo json_encode($pn_manufacturer); ?>');

    pn_dn.onchange = function(){
        //document.getElementById("pn_manufacturer").innerHTML = '<?php echo json_encode($pn_manufacturer); ?>';
        pn_manufacturer.value = this.value;
        description.value = this.value;
        package.value = this.value;
        u_m.value = this.value;
    }
</script>   

With the above JS all the inputboxes are filled with pn_dn value but as I take $pn_dn, $descrizione, $pn_manufacturer, $package and $u_m from the table maglab, I would like to fill the inputboxes with $descrizione, $pn_manufacturer, $package and $u_m based on $pn_dn selection. How can the JS be mmodified?

Answer

You can use custom attribute and in this you can assign your required values for various fields .i.e:

<select id="pn_dn" name="pn_dn" required>
  <option value="">Seleziona</option>
  <?php 
         //your othercodes
         ?>
         <!--use data--attr-->
  <option descrizione='<?php echo $descrizione; ?>' pn_manufacturer='<?php echo $pn_manufacturer; ?>' package='<?php echo $package; ?>' u_m='<?php echo $package; ?>'>
    <?php echo $pn_dn; ?>
  </option>
  <?php } ?>
</select>

Demo Code :

var pn_dn = document.getElementById('pn_dn');
pn_dn.onchange = function() {
  //get select-index
  var slected_index = this.options[this.selectedIndex]
  //use getAttribute to get custom attribute
  document.getElementById("pn_manufacturer").value = slected_index.getAttribute("pn_manufacturer");
  document.getElementById("package").value = slected_index.getAttribute("package");
  document.getElementById("u_m").value = slected_index.getAttribute("u_m");
  document.getElementById("description").value = slected_index.getAttribute("descrizione");
}
<select id="pn_dn" name="pn_dn" required>
  <option value="">Seleziona</option>
  <!--use attr-->
  <option descrizione='A' pn_manufacturer='Ab' package='2' u_m='1'>
    Something ..
  </option>
  <option descrizione='B' pn_manufacturer='Bb' package='5' u_m='5'>
    Something2 ..
  </option>

</select>

<label class="control-label col-sm-2" for="description">Descrizione:</label>
<div class="col-sm-4">
  <textarea class="form-control" rows="3" id="description" name="description" style="width: 100%;"> </textarea>
</div>
</div>
<div class="form-group">
  <label class="control-label col-sm-2" for="pn_manufacturer">Pn_Fornitore:</label>
  <div class="col-sm-4">
    <textarea class="form-control" rows="3" id="pn_manufacturer" name="pn_manufacturer" style="width: 100%;"> </textarea>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="package">Package:</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="package" name="package"> </div>
    <label class="control-label col-sm-2" for="u_m">Unità di misura:</label>
    <div class="col-sm-4">
      <input type="u_m" class="form-control" id="u_m" name="u_m" required>
    </div>
  </div>