d3js: Creating multiple radio buttons

Question

I'm trying to create two radio buttons using d3, however I seem to be having some issues. I can create and label both, however they don't recognize that the other one has been created. For example, if the OR button is selected and I select the AND button, the OR button won't unselect.

I was able to recreate my problem in a fiddle and the code is below:

var body = d3.select("body")

var form = body.append('form');

form.append('input')
    .attr('type', 'radio')
    .attr('value', 'Or')
    .on('click', function () {
        //Do something
    });

form.append('label')
    .html('OR');

form.append('input')
    .attr('type', 'radio')
    .attr('value', 'And')
    .on('click', function () {
        //Do something
    });

form.append('label')
    .html('AND');

Answer 1

The problem was fixed by assigning both radio buttons a name.

See the updated fiddle here

var body = d3.select("body")

var form = body.append('form');

form.append('input')
    .attr('type', 'radio')
    .attr('value', 'Or')
    .attr('name', 'toggle')
    .on('click', function () {
        //Do something
    });

form.append('label')
    .html('OR');

form.append('input')
    .attr('type', 'radio')
    .attr('value', 'And')
    .attr('name', 'toggle')
    .on('click', function () {
        //Do something
    });

form.append('label')
    .html('AND');