Если вам нужно именно
поменять местами, то можно так.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
var jQueryEnd = $(".end");
$(".start").before(function(index) {
var jQueryElement = jQueryEnd.eq(index);
$(this).removeClass("start").addClass("end");
jQueryElement.removeClass("end").addClass("start");
return jQueryElement;
});
});
</script>
<div class="start" data-id="firstID">
<p>One</p>
</div>
<div class="end" data-id="firstID">
<p>Two</p>
</div>
<div class="start" data-id="secondID">
<p>Three</p>
</div>
<div class="end" data-id="secondID">
<p>Four</p>
</div>
</body>
</html>
P. S. Два одинаковых id бессмысленны, может data-id?