JSFiddle - React, Tailwind, and code Playground

HTML

<a id="moveElementUp">Move Up</a>
<a id="moveElementDown">Move Dowm</a>

<div id="elementHolder">
    <a id="element-1">1 </a>
    <a id="element-2">2 </a>
    <a id="element-3">3 </a>
    <a id="element-4">4 </a>
</div>

JavaScript

var $sel; // anchor last clicked on
var prefixstr = "element-";

$('a[id^="'+prefixstr+'"]').click(function(e) {
    $sel = $(this);
});
$('#moveElementUp').click(function(e) {
    // Move Clicked Element Up One Spot in List
    $sel.prev().before($sel);
    changeIDs($('#elementHolder'));
});
$('#moveElementDown').click(function(e) {
    // Move Clicked Element Down One Spot in List
    $sel.next().after($sel);
    changeIDs($('#elementHolder'));
});

function changeIDs($j) {
    $j.children('a').each(function(i) {
        $(this).attr('id',prefixstr+i);
    });
}