generate dynamic OnClick Jquery
<p>i have 5 different onClick functions of 5 different classes what i want to do is run a loop,iterate through an array and assign classes to the onClick dynamically,but here's the catch while we were in a loop it just replaces the the onclick value after every iteration and only last dynamic onclick is generated and the rest are obviously overwritten! is there any way i can generate unique and seperate 5 onclicks dynamically because the data may vary i might have seven classes..here is the javascript </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.demolition-button').click(function(e) {
  $('.tags button').each(function(index, element) {
    $(this).removeClass('tag-active');
  });
  $(this).addClass('tag-active');
  $('.category').each(function(index, element) {
    if ($(this).hasClass('category-active')) {
      $('.category-active').slideUp('slow', function() {
        $(this).removeClass('category-active');
        $('.demolition').slideDown('slow');
        $('.demolition').addClass('category-active');
      })

    }
  });;
});

$('.plumbing-button').click(function(e) {
  $('.tags button').each(function(index, element) {
    $(this).removeClass('tag-active');
  });
  $(this).addClass('tag-active');
  $('.category').each(function(index, element) {
    if ($(this).hasClass('category-active')) {
      $('.category-active').slideUp('slow', function() {
        $(this).removeClass('category-active');
        $('.plumbing').slideDown('slow');
        $('.plumbing').addClass('category-active');
      })

    }
  });
});
$('.painting-button').click(function(e) {
  $('.tags button').each(function(index, element) {
    $(this).removeClass('tag-active');
  });
  $(this).addClass('tag-active');
  $('.category').each(function(index, element) {
    if ($(this).hasClass('category-active')) {
      $('.category-active').slideUp('slow', function() {
        $(this).removeClass('category-active');
        $('.painting').slideDown('slow');
        $('.painting').addClass('category-active');
      })

    }
  });
});
$('.flooring-button').click(function(e) {
  $('.tags button').each(function(index, element) {
    $(this).removeClass('tag-active');
  });
  $(this).addClass('tag-active');
  $('.category').each(function(index, element) {
    if ($(this).hasClass('category-active')) {
      $('.category-active').slideUp('slow', function() {
        $(this).removeClass('category-active');
        $('.flooring').slideDown('slow');
        $('.flooring').addClass('category-active');
      })

    }
  });
});
$('.damage-button').click(function(e) {
  $('.tags button').each(function(index, element) {
    $(this).removeClass('tag-active');
  });
  $(this).addClass('tag-active');
  $('.category').each(function(index, element) {
    if ($(this).hasClass('category-active')) {
      $('.category-active').slideUp('slow', function() {
        $(this).removeClass('category-active');
        $('.damage').slideDown('slow');
        $('.damage').addClass('category-active');
      })

    }
  });
});


The Html

  &lt; section class = "projects" &gt;
  &lt; div class = "container" &gt;
  &lt; h2 &gt; OUR PROJECTS &lt; /h2&gt;
                 &lt;h4&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget eros eget velit malesuada tempor.
                     Aliquam libero arcu, ultrices ac scelerisque eu, placerat fringilla est. Integer pellentesque, orci id place                 congue, nibh lectus commodo velit.&lt;/h4 &gt;
  &lt; div class = "tags" &gt;
  &lt; div class = "tag-col" &gt;
  &lt; button type = "button"
class = "all-button tag-active" &gt; ALL &lt; /button&gt;
                        &lt;/div &gt;
  &lt;? php $sql = "select * from categories";
$run = mysqli_query($db, $sql);
while ($row = mysqli_fetch_array($run)) {



  ?&gt;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tag-col"&gt;
  &lt;button type="button" class="&lt;?php echo $row['catgeory_name'];?&gt;"&gt;
    &lt;?php echo $row[ 'catgeory_name'];?&gt;
  &lt;/button&gt;
&lt;/div&gt;

&lt;/div&gt;
&lt;div class="gallery"&gt;
  &lt;div class="service-row category all category-active"&gt;
    &lt;img src="images/1.png" /&gt;
    &lt;img src="images/2.png" /&gt;
    &lt;img src="images/3.png" /&gt;
    &lt;img src="images/4.png" /&gt;
  &lt;/div&gt;
  &lt;div class="service-row category &lt;?php echo $row['catgeory_name'];?&gt;"&gt;
    &lt;img src="images/1.png" /&gt;
  &lt;/div&gt;
  &lt;div class="service-row category &lt;?php echo $row['catgeory_name'];?&gt;"&gt;
    &lt;img src="images/4.png" /&gt;
  &lt;/div&gt;
  &lt;div class="service-row category &lt;?php echo $row['catgeory_name'];?&gt;"&gt;
    &lt;img src="images/3.png" /&gt;
  &lt;/div&gt;
  &lt;div class="service-row category &lt;?php echo $row['catgeory_name'];?&gt;"&gt;
    &lt;img src="images/5.png" /&gt;
  &lt;/div&gt;
  &lt;div class="service-row category &lt;?php echo $row['catgeory_name'];?&gt;"&gt;
    &lt;img src="images/2.png" /&gt;
  &lt;/div&gt;

  &lt;?php ?&gt;
&lt;/div&gt;
&lt;a class="hvr-icon-wobble-horizontal"&gt;VIEW ALL PROJECTS&lt;/a&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>Can i somehow do this dynamically? thanks in advance</p>