Jquery function runs from click binded to generated with Jinja2, but not when the same generated by jquery.append

Question

I'm developing a browser based app that updates a dropdown menu with data collected from an nmap scan. When I run the scan, the Python server returns jsonify data to the client via Jquery and appends each entry to a div

var $ipsniff_elem = $('div#sniff-ip-list');
    
$ipsniff_elem.append(
     $('<a/>', {'class': 'dropdown-item', 'href': '#', 'id': 'sniff-ip', 'value': value[i].IP_address, text: value[i].IP_address})

However, when I start the app, the info is pulled from a database and the entries are appended to the html doc with Jinja2

{% if (devices) %}
    {% for dev in devices %}
        <a class="dropdown-item" href="#" id="sniff-ip" value="{{ dev[1] }}">{{ dev[1] }}</a>
    {% endfor %}
{% endif %}

These are both meant to generate the same a-tags that can be clicked to run a jquery function binded to the id 'sniff-ip'

<script>
      $(function() {
          $('a#sniff-ip').bind('click', function() {

              alert("I'm clicked");
              return false;
          });
      });   
</script>

Confusingly though, when clicked, only the tags created with Jinja2 will run the jquery function and the ones created with jquery.append will not. The fields look the same in the inspector. Do they perhaps compile afterwards?

(I realise I could just pull everything from the database and let Jinja2 do everything, but I developed the jquery stuff before I implemented my db and I kinda just want to know what's going on here)

Thank you in advance for any consideration of this.