title: Improving jQuery for many corresponding divs
body: <p>I'm still relatively new to jQuery and learning, I've created the below code/script that does what I need but I have to create a new function for every selector and target I add and the code will get long in the end as I intend to have at least 10 selectors and targets.</p>
  
  <p>So when you hover over a selector (button) it adds an active class to that button (removing it from other buttons) and stays on till you select another button while at the same time switching out targets (different img's in this case).</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  body {
      background:grey;
  }
  #terrace-fw-wrap {
      display:block; 
      width:100%;
      max-width:600px;
      margin: auto;
      text-align: center;
  }
  
  #terrace-fw-wrap .content {
      display:block; 
      width:100%;
  }
  
  #terrace-fw-wrap .content .img {
      display:none; 
      width:100%;
  }
  
  .active-img {
      display:block !important; 
      width:100% !important;
  }
  
  #terrace-fw-wrap .buttons .but {
      display:inline-block; 
      width:150px;
      padding:10px;
      margin:10px;
      text-align: center;
      color:black;
      background:white;
  
  }
  
  #terrace-fw-wrap .buttons .but:hover {
      color:white;
      background:black;
      cursor: pointer;
  }
  
  .active-but {
      color:white !important;
      background:black !important;
  
  }
  
  &lt;/style&gt;
  
  &lt;section id="terrace-fw-wrap"&gt;
      &lt;section class="content"&gt;
          &lt;img class="img img1 active-img" src="http://s9.postimg.org/oatcz7bpr/img1.jpg" /&gt;
          &lt;img class="img img2" src="http://s9.postimg.org/6314c1xxr/img2.jpg" /&gt;
          &lt;img class="img img3" src="http://s30.postimg.org/llqz7e7yp/img3.jpg" /&gt;
      &lt;/section&gt;
      &lt;div class="buttons"&gt;
          &lt;div class="but but1"&gt;
              Button 1
          &lt;/div&gt;
          &lt;div class="but but2"&gt;
              Button 2
          &lt;/div&gt;
          &lt;div class="but but3"&gt;
              Button 3
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  
  &lt;script&gt;
  $(function(){
      $('.but1').hover(function(){
        $('.img1').addClass('active-img');
        $('.img2').removeClass('active-img');
        $('.img3').removeClass('active-img');
        $('.but1').addClass('active-but');
        $('.but2').removeClass('active-but');
        $('.but3').removeClass('active-but');
      });        
  });
  
  $(function(){
      $('.but2').hover(function(){
        $('.img2').addClass('active-img');
        $('.img1').removeClass('active-img');
        $('.img3').removeClass('active-img');
        $('.but2').addClass('active-but');
        $('.but1').removeClass('active-but');
        $('.but3').removeClass('active-but');
      });        
  });
  
  $(function(){
      $('.but3').hover(function(){
        $('.img3').addClass('active-img');
        $('.img1').removeClass('active-img');
        $('.img2').removeClass('active-img');
        $('.but3').addClass('active-but');
        $('.but1').removeClass('active-but');
        $('.but2').removeClass('active-but');
      });        
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/8btdeftu/">https://jsfiddle.net/8btdeftu/</a></p>
  
  <p>Is there a way to change it so I can just add as many corresponding selectors and targets without having to add a new function to the script?</p>
  
  <p>Thanks</p>