Running the same JS function on multiple name values

Hello guys and thanks for helping out in the first place!

I'm running into some trouble with checkboxes and .js since it's the first time i'm using those.

I'll provide a fiddle so you can see the problem.

I have a .js function which works with "input name=" to display a certain div when multiple checkboxes are selected and everything is working fine.

The problem is, i want to group my checkboxes in different categories, to later on having the possibility of having only one checkbox for each category selected at a time.

Changing the "name=" value seems like the smartest and easiest thing but as soon as i change that, in both .js and html file, everything stops working.

So the question is: how can i replicate my .js function using different name values?

example: first category is "colors" and they will all be named as "cc", second category will be "rims" and they will all be named "bb", third category is "pads" and they will all be named "aa"

Thanks a lot in advance.

Here's the fiddle: https://jsfiddle.net/q98pvLk0/

html:

    <div id="configurations">
<div id="colorbuttons">
  <h1>Colors</h1>
  <input type="checkbox" id="yellow" name="cc" value="yellow_div_id" data-ref="yellow_div_id" />
  <label>Yellow</label>
  <input type="checkbox" id="green" name="cc" value="green_div_id" data-ref="green_div_id" />
  <label>Green</label>
  <input type="checkbox" id="red" name="cc" value="red_div_id" data-ref="red_div_id" />
  <label>Red</label>
  <input type="checkbox" id="blue" name="cc" value="blue_div_id" data-ref="blue_div_id" />
  <label>Blue</label>
  <input type="checkbox" id="orange" name="cc" value="orange_div_id" data-ref="orange_div_id" />
  <label>Orange</label>
  <input type="checkbox" id="purple" name="cc" value="purple_div_id" data-ref="purple_div_id" />
  <label>Purple</label>
  <input type="checkbox" id="lightblue" name="cc" value="lightblue_div_id" data-ref="lightblue_div_id" />
  <label>Light Blue</label>
  <input type="checkbox" id="magenta" name="cc" value="magenta_div_id" data-ref="magenta_div_id" />
  <label>Magenta</label>
  <input type="checkbox" id="aubergine" name="cc" value="aubergine_div_id" data-ref="aubergine_div_id" />
  <label>Aubergine</label>
  <input type="checkbox" id="turquoise" name="cc" value="turquoise_div_id" data-ref="turquoise_div_id" />
  <label>Turquoise</label>
</div>
<div id="rimsbuttons">
  <h1>Rims</h1>
  <input type="checkbox" id="cerchio1" name="cc" value="cerchio1_div_id" data-ref="cerchio1_div_id" />
  <label>Cerchio 1</label>
  <input type="checkbox" id="cerchio2" name="cc" value="cerchio2_div_id" data-ref="cerchio2_div_id" />
  <label>Cerchio 2</label>
</div>
<div id="padsbuttons">
  <h1>Pads</h1>
  <input type="checkbox" id="pinza1" name="cc" value="pinza1_div_id" data-ref="pinza1_div_id" />
  <label>Pinza 1</label>
  <input type="checkbox" id="pinza2" name="cc" value="pinza2_div_id" data-ref="pinza2_div_id" />
  <label>Pinza 2</label>
</div>
</div>
<!-- Loaded/hidden content div-->
<div id="listings">
 <div class="hide-me" id="default">
   <ul class="rslides">
     <li><img src="img/default_1_1_view1.png" alt=""></li>
     <li><img src="img/default_1_1_view2.png" alt=""></li>
     <li><img src="img/default_1_1_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="defaultcerchio2pinza1_div_id">
   <ul class="rslides">
     <li><img src="img/default_2_1_view1.png" alt=""></li>
     <li><img src="img/default_2_1_view2.png" alt=""></li>
     <li><img src="img/default_2_1_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="defaultcerchio2pinza2_div_id">
   <ul class="rslides">
     <li><img src="img/default_1_2_view1.png" alt=""></li>
     <li><img src="img/default_1_2_view2.png" alt=""></li>
     <li><img src="img/default_1_2_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="defaultcerchio1">
   <ul class="rslides">
     <li><img src="img/default_2_2_view1.png" alt=""></li>
     <li><img src="img/default_2_2_view2.png" alt=""></li>
     <li><img src="img/default_2_2_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="yellowcerchio1pinza1_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/yellow_1_1_view1.png" alt=""></li>
     <li><img src="img/yellow_1_1_view2.png" alt=""></li>
     <li><img src="img/yellow_1_1_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="yellowcerchio1pinza2_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/yellow_1_2_view1.png" alt=""></li>
     <li><img src="img/yellow_1_2_view2.png" alt=""></li>
     <li><img src="img/yellow_1_2_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="yellowcerchio2pinza2_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/yellow_2_2_view1.png" alt=""></li>
     <li><img src="img/yellow_2_2_view2.png" alt=""></li>
     <li><img src="img/yellow_2_2_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="yellowcerchio2pinza1_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/yellow_2_1_view1.png" alt=""></li>
     <li><img src="img/yellow_2_1_view2.png" alt=""></li>
     <li><img src="img/yellow_2_1_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="orangecerchio1pinza1_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/orange_1_1_view1.png" alt=""></li>
     <li><img src="img/orange_1_1_view2.png" alt=""></li>
     <li><img src="img/orange_1_1_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="orangecerchio2pinza1_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/orange_2_1_view1.png" alt=""></li>
     <li><img src="img/orange_2_1_view2.png" alt=""></li>
     <li><img src="img/orange_2_1_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="orangecerchio2pinza2_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/orange_2_2_view1.png" alt=""></li>
     <li><img src="img/orange_2_2_view2.png" alt=""></li>
     <li><img src="img/orange_2_2_view3.png" alt=""></li>
   </ul>
 </div>
 <div class="hide-me" id="orangecerchio1pinza2_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/orange_1_2_view1.png" alt=""></li>
     <li><img src="img/orange_1_2_view2.png" alt=""></li>
     <li><img src="img/orange_1_2_view3.png" alt=""></li>
   </ul>
 </div>
</div>

js:

$(document).ready(function () {

    // select checkboxes by name
    var packages = $("input[name='cc']");
    // set main div id
    var packageDiv = $("#listings");

    // bind to change event
    packages.change(function () {

        // empty array
        var idArr = [];
        // get the checked values
        var checked = $("input[name='cc']:checked");
        // loop and build array
        checked.each(function () {
            idArr.push($(this).prop("id"));
        });

        // remove whitespace from multiple checkboxes array
        var trimArray = idArr.join("");

        toggleShowHide(trimArray, packageDiv);

    });

});

function toggleShowHide(arr, elem) {

    var arrLen = arr.length;

    // clear last selection when unchecking boxes
    $(".hide-me").hide();

    // set default if array is empty
    if (arrLen < 1 ){
        setDefault(elem);
    }

    // run the show hide based on array of selection

    for(i = 0; i < arrLen; i++) {
        // set the name for the selected div
        var temp = "#" + arr + "_div_id";

        $(temp).show();
        $("#default").hide();

    }

    // unhide
    elem.show();

}

function setDefault(elem){
    $("#default").show();
}

//SLIDESHOW

  $(function() {
    $(".rslides").responsiveSlides({
      auto:false,
      nav:true,
    });
  });

css:

#configurations{
  float: left;
  width:20vw;
}
#colorbuttons{
  float: left;
  width:20vw;
}

#rimsbuttons{
  float: left;
  width:20vw;
}

#padsbuttons{
  position:float;
  float: left;
  width:20vw;
}

#listings{
  position:float;
  float: left;
  width:80vw;
  margin: 0 auto;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }