Propose : get or select tag button with javascripts after ajax showing all data,

Issue : I can't get the button affter ajax respond.

Description : I use javascript and select button with id = "btn_infor" use querySelectorAll(), but when I was selecting, the data not found and my variabel Nodelists have nothing.

Javascript(Ajax) :

function get_databyvisibility(num,variabels){
        visible = num
        $.ajax({
            type:'GET',
            url:`/post-jsondata/${visible}/`,
            dataType:'json',
            success: function(response){
                variabels(response.data)
            },
            error: function(error){
                console.log(error)
            }
        })

Then I use this function to show data to html.

function call_datas(result){
        result.map(post =>{
            more_procudt.innerHTML += `
                <div class="product-box">
                    <img src="${post.image_urls}" alt="" class="product-img" id="more-imgpro">
                    <h2 class="product-title" id="more-titlepro">${post.name}</h2>
                    <span class="price" id="more-pricepro">$${post.price}</span>
                    <div class="detail-info">
                        <button class="but-info" id="btn_infor">Detail</button>
                    </div>
                </div>
            `
        })

I call the function : get_databyvisibility(4,call_datas)

after I call the function and then I use this code to select this tag " <button class="but-info" id="btn_infor">Detail</button>"

This the code to select all button : const button_information = document.querySelectorAll("btn_infor");

After I select all buttons my variable has nothing nodelist.