How to access id of each button from button group - jQuery?

Question

I have these 3 buttons inside a button group

<div class="btn-group btn-nodetype pull-right">
    <button id="zuse" class="btn btn-default active" type="button">Zuse/xMEG</button>
    <button id="vmhost" class="btn btn-default" type="button">VM Hosts</button>
    <button id="kubernetes" class="btn btn-default" type="button">Kubernetes</button>
</div>

On click, I am trying to print out it's id

$('.btn-nodetype button').click(function() {
    console.log($('button').attr('id'));
});

I can only see the first element id.

How do see the id on the one that I click on ?

Answer 1

Use this to refer to the button clicked:

console.log(this.id);

$('.btn-nodetype button').click(function() {
    console.log(this.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-nodetype pull-right">
    <button id="zuse" class="btn btn-default active" type="button">Zuse/xMEG</button>
    <button id="vmhost" class="btn btn-default" type="button">VM Hosts</button>
    <button id="kubernetes" class="btn btn-default" type="button">Kubernetes</button>
</div>