Dynamic added elements not removing on the first click

Question

I am adding the elements in html page on the select event, its working fine but when i click on remove icon corresponding to the element its not getting removed on single click. However it gets removed when i click twice.

function addToFilter(divName) {
  console.log(divName);
  var val = document.getElementById('filter').value;
  var newdiv = document.createElement('div');

  switch (val) {
    case 'mcus':
      newdiv.innerHTML = "<div class='container'>Multi company use case &nbsp: " +
        "&nbsp;<select id='mcuc_selection'>" +
        "<option value='select'>--select--</option><option value='ags'>AGS</option><option value='agl'>AGL</option><option value='nafn'>NAFN</option></select>" +
        "&nbsp;&nbsp<img src='remove-icon.jpg' alt='remove' onclick='removeFilters();' onmouseover='' style='cursor: pointer;' class='remove-icon'>" +
        "<hr style='width:900px; margin-left:0px;'></div>";
      break;

    case 'oc':
      newdiv.innerHTML = "<div class='container'>Order Condition &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:" +
        "&nbsp;&nbsp;<select id='oc_selection'><option value='select'>--select--</option><option value='1'>1</option>" +
        "<option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option>" +
        "<option value='6'>6</option><option value='7'>7</option>" +
        "</select> &nbsp;<img src='remove-icon.jpg' alt='remove' onclick='removeFilters();' onmouseover='' style='cursor: pointer;' class='remove-icon'>" +
        "<hr style='width:900px; margin-left:0px;'></div>";
      break;

    case 'ot':
      newdiv.innerHTML = "<div class='container'>Order Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:" +
        "&nbsp;&nbsp;<select id='oc_selection'><option value='select'>--select--</option><option value='shadow'>shadow</option>" +
        "<option value='customer'>customer</option></select> &nbsp;" +
        "<img src='remove-icon.jpg' alt='remove' onclick='removeFilters();' onmouseover='' style='cursor: pointer;' class='remove-icon'>" +
        "<hr style='width:900px; margin-left:0px;'></div>";
      break;

    case 'dt':
      newdiv.innerHTML = "<div class='container'>Date&Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:" +
        "<div id='startDate' class='input-append date' style='margin-left:165px; margin-top:-20px'>" +
        "<label>Start Date&Time: </label>" +
        "<input  id='date1' type='text' style='width:200px; height:15%'></input>" +
        "<span class='add-on' style='height:26px'>" +
        "<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>" +
        "</span>" +
        "</div>" +
        "<div id='endDate' class='input-append date' style='margin-left:550px; margin-top:-55px'>" +
        "<label>End Date&Time:&nbsp;</label>" +
        "<input type='text' style='width:200px; height:15%'></input>" +
        "<span class='add-on' style='height:26px'>" +
        "<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>" +
        "</span>" +
        "</div>" +
        "&nbsp;<img src='remove-icon.jpg' alt='remove' onclick='removeFilters();' onmouseover='' style='cursor: pointer; margin-left:780px; margin-top:-55px' class='remove-icon'><hr style='width:900px; margin-left:0px;'></div>";
      break;

  }
  document.getElementById(divName).appendChild(newdiv);
  if (val == "dt") {
    callDate();
  }
}


function callDate() {
  $('#startDate').datetimepicker({
    format: 'dd/MM/yyyy hh:mm:ss PP',
    language: 'en',
    pick12HourFormat: true
  });

  $('#endDate').datetimepicker({
    format: 'dd/MM/yyyy hh:mm:ss PP',
    language: 'en',
    pick12HourFormat: true
  });
}


function removeFilters() {
  $(".remove-icon").on("click", function() {
    $(this).parent(".container").remove();
  });
}

<div id="flt" class="x_content">
  <br>
  <div id="div_filter1">
    <div id="div_filter2">
      Add Filters&nbsp;&nbsp;&nbsp;&nbsp;:
      <select id="filter">
        <option value="select">--select--</option>
        <option value="mcus">Multi Company Use Case</option>
        <option value="oc">Order Condition</option>
        <option value="ot">Order Type</option>
        <option value="dt">Date&Time</option>
        <option value="oi">Order Id</option>
        <option value="si">Shipment Id</option>
        <option value="pi">Purchase Id</option>
      </select>
      &nbsp;
      <img id="add-icon" src="add-icon.jpg" alt="add" onmouseover="" style="cursor: pointer;" onclick="addToFilter('div_filter1');">
      <button id="go" type="submit" value="Submit">Go</button>
      <br>
      <hr style='width:1100px; margin-left:0px; margin-top: 20px;'>
    </div>
  </div>
</div>