Impossible d'afficher un élément avec after()

Bonjour,

J'ai le code suivant :

Code:

1
2
3
4
5
6
7
<p><label>type<select name="trade[security_attributes][security_type_id]" id="trade_security_attributes_security_type_id" class="w3-select">
 
  <option value="1">Action</option>
  <option value="2">Warrant</option>
  <option value="3">Turbo</option>
</select>
</label></p>

Code:

1
2
3
4
5
6
7
8
<template id="underlying">
  <div>
    <p><label>Code ISIN<input type="text" id="trade_security_attributes_underlying_attributes_isin_code" name="trade[security_attributes][underlying_attributes][isin_code]" class="w3-input" value="" maxlength="12" required>
</label></p>
    <p><label>Nom<input type="text" id="trade_security_attributes_underlying_attributes_name" name="trade[security_attributes][underlying_attributes][name]" class="w3-input" value="" required>
</label></p>
  </div>
</template>

Code:

1
2
3
4
5
6
7
8
<script>
  var derivatives = [2,3];
  $("#trade_security_attributes_security_type_id").change(function() {
    if (derivatives.indexOf(parseInt($(this).val()) > 0)) {
      $("#trade_security_attributes_security_type_id").parent().parent().after($("#underlying"));
    } 
  });
</script>

L'affichage de l'élément "underlying" ne fonctionne pas. Qui peux m'aider ?