The way you have targeted your HTML elements is close, but incorrect. You should not be giving multiple elements the same id (read another answer here and see this article to find out more about why).

Having more than 1 element with same id will only return the first element, which is why only 1 button works.

To solve this issue, replace the id with class and modify your code to look like this:

Buttons

<button class="NotifyBtn" name="Billy" town="Bob">Press Me</button>
<button class="NotifyBtn" name="Timmy" town="Tawin">Press Me</button>
<button class="NotifyBtn" name="Milly" town="House">Press Me</button>

JavaScript:

let buttons = document.getElementsByClassName("NotifyBtn")
for(let i = 0; i < buttons.length; i++){
    let button = buttons[i]
    button.addEventListener("click", function(){
        var name = button.getAttribute("name");
        var town = button.getAttribute("town");
        fetch("{% url 'alert_via_JSON_Response' %}", {
            method: "POST",
            headers: {
                "X-CSRFToken": "{{ csrf_token }}",
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ message: "Hi there: " + `${name} born in ${town}`
             })
            }).then(response => response.json())
                .then(data => alert(data.status));
    });
}

What this does is select all elements with class and return them as an array of elements. Then for loop each item in the array and attach the event listener to each of them.