Q:

jQuery/Javascript toggle between a bunch of classes on body tag

I have a bunch of spans in my HTML structure with different ID's and i want to toggle classes on body tag by each of the span ID's
For example if i click on a span with ID_0 I want to toggle class ID_0 on body tag
and if i click on ID_1 then remove the other ones and add the one i clicked   

$(".images").click(function(){
      var ids = $(this).attr("id");
      $("body").removeClass("ID_0 ID_1 ID_2 ID_3").addClass(ids);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div class="Container">
    <span class="images" id="ID_0">ID_0</span>
    <span class="images" id="ID_1">ID_1</span>
    <span class="images" id="ID_2">ID_2</span>
    <span class="images" id="ID_3">ID_3</span>
  </div>
</body>
</html>

The spans are auto generated with php and each of the spans have its own ID's there might be +15 spans like that, So im pretty sure you can do way better than my newbie jquery coding :) 

A:

The code below will remove any class that starts with ID_ since this is your "wildcard"
$("body").removeClass(function(index, className) {
    return (className.match(/(^|\s)ID_\S+/g) || []).join(' ');
});

$(".images").click(function() {
  var ids = $(this).attr("id");
  $("body").removeClass(function(index, className) {
    return (className.match(/(^|\s)ID_\S+/g) || []).join(' ');
  });
  $("body").addClass(ids);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div class="Container">
    <span class="images" id="ID_0">ID_0</span>
    <span class="images" id="ID_1">ID_1</span>
    <span class="images" id="ID_2">ID_2</span>
    <span class="images" id="ID_3">ID_3</span>
  </div>
</body>

</html>

