JSFiddle - React, Tailwind, and code Playground

HTML

<div id="list1">
</div>
<hr>
<div id="list2">
</div>

JavaScript

data1 = [
    { key: 'orig7', val: 7 },
    { key: 'orig3', val: 3 },
    { key: 'orig6', val: 6 }
];
data2 = [
    { key: 'orig7', val: 7 },
    { key: 'orig3', val: 3 },
    { key: 'orig6', val: 1 },
    { key: 'new5', val: 5 }
];

function render1(data) {
    var result = d3.select('#list1').selectAll('.item')
        .data(data, function(d, i) { return d.key });
    result.enter()
        .append('div')
            .classed('item', true)                       // set up a div
    result                                               // set text in the div
        .text(function(d, i) { return '' + d.key + "=" + d.val; });
    result.exit().remove();
    result.sort(function(a, b) { return a.val < b.val ? -1 : 1 });
}

function render2(data) {
    var result = d3.select('#list2').selectAll('.item')
        .data(data, function(d, i) { return d.key });
    result.enter()
        .append('div')
            .classed('item', true)
        .append('div')                                   // set up an *inner* div
    result.select('div')                              // set text in the inner div
        .text(function(d, i) { return '' + d.key + "=" + d.val; });
    result.exit().remove();
    result.sort(function(a, b) { return a.val < b.val ? -1 : 1 });
}

render1(data1);
render1(data2);

render2(data1);
render2(data2);