Add delete icon to dynamically created <option>

Add delete icon to dynamically created <option>

Hi,

I have a <select> for industry which is by default one on the form and allowing user to create more using jquery

I want to include a delete icon beside the dynamically added <option>.

How can id do this?

  1. <tr>
  2.     <td valign="middle">Industry</td>
  3.     <td valign="middle">:</td>
  4.     <td valign="middle">         
  5.         <div id="container">
  6.         <select id="cboIndustry" name="cboIndustry[]" style="width: 100%" required>
  7.             <option value="" selected>[Industry..]</option>
  8.             <?php
  9.                 $mysql_command = "CALL sp_populate_industry()";
  10.                 $mysql_query = $mysql_connection->prepare($mysql_command);

  11.                 $mysql_query->execute();

  12.                 while($mysql_row = $mysql_query->fetch())
  13.                 {
  14.             ?>
  15.             <option value="<?php echo $mysql_row['industry_id']; ?>"><?php echo $mysql_row['industry_name']; ?></option>
  16.             <?php } ?>
  17.         </select>
  18.         </div>
  19.     </td>
  20. </tr>

  1. <script type="text/javascript">
  2.     $(function() {
  3.         var counter = 0;
  4.         $('#add_industry').click(function() {
  5.             counter++;
  6.             var newField = $('#cboIndustry').clone().
  7.                 attr({id: 'cboIndustry_' + counter,
  8.                     name: 'cboIndustry[]'});
  9.             $('#container').append(newField);
  10.         });
  11.     });
  12. </script>