jQuery each method wont select appended HTML

Question

I have a map and an array of markers. I would like for the users to be able to click on a button that is included in an appended HTML that is added to a <p> with a class of side. The below code is what I have and it works for the buttons above the map which are just a test for code right now.

However, I would like the eye button on the sidebar to act like the buttons above.

I have tried to use $('#find').each , but it does't work.

Will the each method not work with appended HTML?

I have found that this works for the appended HTML, however it wont run the marker click. I have this assigned to the eye buttons at this time:

$(document).on('click', '#find', function(i) {
 alert("Hello! I am an alert box!!");
      google.maps.event.trigger(markers[i], 'click');
     });

You can see my code at work here: https://ddtech.live/test/

Disclaimer: This is just a hobby of mine and still learning.

HTML

<p class="side"></p>

JS

 var markers = [];
        $('#btn button').each(function(i,e) {
          $(e).click(function(i,e) {  
           return function(e) {     
              google.maps.event.trigger(markers[i], 'click');
            }
          }(i));
        });


    var status = '<span style ="float: right"><button id="find" class="zoombtn2" onclick=""><i class="fas 
fa-eye"></i></button></span>'

     var name = markerData.first + " " + markerData.last;
     var str = name.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
      });

 $(document).ready(function() {
      $('p.side').append('<div class="boxed">' + str + status + '</div>');
       });

Answer 1

You cannot use $('#find').each as #find is an id. You can only use an id for one element per page. Assuming that the indices of your buttons correctly correlate with the google maps marker you could use this code:

$('.boxed button').each(function(i,e) {
  $(e).click(function(i,e) {
    return function(e) {
      google.maps.event.trigger(markers[i], 'click');
    }
  }(i));
});

You may have better results in assigning a data attribute to each button and using this to select the correct marker: <button data-id="someid"></button>

And in your each function you would select the data attribute with: $(this).data("id")

Answer 2

Ended up using the below. Thanks again for those that answered.

function clickLatLng() {
  [...document.querySelectorAll('.boxed')].map((el, i) => {
    el.addEventListener('click', () => {
      map.panTo(markers[i].getPosition());
      map.setZoom(8);
    });
  });
}

side_bar_html += '<div class="boxed">' + str + location + live + '</div>';
//  put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;

Along with this as my button:

var location = '<button class="zoombtn" onclick="clickLatLng()"><i class="e70-5 x-icon" aria-hidden="true" data-x-icon-o=""></i></button>'