使用javascript来防止动态生成的输入文本框的重复值

I have a 3 step (3 page) form. The first page that asks the user to check up to 5 of there favorite music genres. The second page dynamically displays the checked genres and then asks to rank them and the third page displays their music genre preference in order.

My question is how can I use javascript to prevent duplicate values of dynamically generated input text boxes on the second page?

I found this code (http://jsfiddle.net/zHJSF/) that would work if my text box fields were set but the text box fields are being generated dynamically. It might be easier to tweak that code or do something different that involves a loop. I'm not sure.

below is the code for the three pages:

Page 1

<form id="genre" name="genre" method="post" action="musicsell.php">
  <input type="checkbox" name="genre[]" id="Rap" value="Rap"/>Rap<br />
  <input type="checkbox" name="genre[]" id="HipHop" value="HipHop"/>HipHop<br />
  <input type="checkbox" name="genre[]" id="RnB" value="RnB"/>RnB<br />
  <input type="checkbox" name="genre[]" id="Rock" value="Rock"/>Rock<br />
  <input type="checkbox" name="genre[]" id="Jazz"value="Jazz"/>Jazz<br />

  <p>
    <input type="submit" value="Next">
    <br />
  </p>
</form>

Page 2

<form id="form1" name="form1" method="post" action="musicresults.php">
<?php
$name = $_POST['genre'];

if(isset($_POST['genre'])) {
foreach ($name as $genre){

?>

<input type="number" required="required" id="<?php echo $genre ?>" name="music[<?php echo $genre ?>]" max="3" min="1" /><?php echo $genre ?><br /> 

<?php
    }
} 
?>

<input type="submit" name="button" id="button" value="Submit" /></form>

page 3

<?php
//Get the form results (which has been converted to an associative array) from the $_POST super global
$musicgenres = $_POST['music'];

//Sort the values by rank and keep the key associations.
asort($musicgenres, SORT_NUMERIC );

/*
//Loop over the array in rank order to print out the values.
foreach($musicgenres as $music => $rank)
{
   echo "$music is your $rank choice";
   echo "<br>";
}*/

foreach($musicgenres as $music => $rank)
{
   array_push($musicstring, $music); 
   echo "$music is your $rank choice";
   echo "<br>";
}

$musicstring = implode(", ", $musicgenres);
 echo $musicstring;
?>

add a class to the inputs i will use the class test and i'm using jquery so add the jquery library before add the code

$(document).ready(function(){
  $('.test').change(function(){
    var theinput=$(this);
    var value=theinput.val();
    $('.test').each(function(){
      if($(this).val()==value){
        theinput.val('');//to remove the value
        alert('you choose a duplicate');//notify the user why the value removed
      }
    });
  });
});