JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tableau">
<tr>
  <td>A</td>
  <td>un</td>
  <td data-nom="dupont">1234566789</td>
  <td>elfingnungen</td>
</tr>
<tr>
  <td>A</td>
  <td>deux</td>
  <td data-nom="durand">0234566789</td>
  <td>zwei</td>
</tr>
<tr>
  <td>B</td>
  <td>jaune</td>
  <td data-nom="fafin">1234569789</td>
  <td>gelb</td>
</tr>
<tr>
  <td>B</td>
  <td>rouge</td>
  <td data-nom="sarafon">0034566789</td>
  <td>rot</td>
</tr>
<tr>
  <td>B</td>
  <td>vert</td>
  <td data-nom="dupinot">1233366789</td>
  <td>grun</td>
</tr>
<tr>
  <td>C</td>
  <td>vent</td>
  <td data-nom="telemak">1234564449</td>
   <td>luft</td>
</tr>
<tr>
  <td>D</td>
  <td>Lundi</td>
  <td data-nom="verdigen">1111566789</td>
  <td>Montag</td>
</tr>
<tr>
  <td>D</td>
  <td>MARDI</td>
  <td data-nom="marfinol">1296866789</td>
  <td>Dienstag</td>
</tr>

</table>
<select id="nom">

</select><br/>
<input id="_1" type="text" value="" />
<input id="_2" type="text" value="" />
<input id="_3" type="text" value="" />
<input id="_4" type="text" value="" />

CSS

.selline { background-color: silver;}

JavaScript

$(function(){

choix=[];
$('tr').each( function(){
	choix.push( $(this).find('td:eq(2)').data('nom') );
})
choix.sort()

$.each(choix, function(idx, cont){
$('#nom').append( $('<option/>').val(cont).html(cont))
})

$('#nom').on('change', function(){
$ligne=$("#tableau tr td[data-nom='"+$(this).val()+"']").parent();
$ligne.siblings().removeClass('selline');
$ligne.addClass('selline');

for(i=1;i<5;i++){
$('#_'+ i).val( $ligne.find('td:eq('+ (i-1) +')').html() )
}


})
})