Применение эффекта наведения к нескольким элементам

Question

Так что это заняло у меня немного времени, но я получил эффект наведения, который я хотел для своего элемента веб-сайта, но теперь проблема в том, что он делает это только для первого элемента на сайте, а не для любого другого... Я не уверен, почему он только присоединяется к первому элементу, и очень хотел бы, чтобы он работал на них всех. Раньше у меня было такое, где эффект парения происходил на всех них одновременно, но я не хотел, чтобы это происходило.

$(document).ready(function() {
  $("#art").mouseover(function() {
    $(this).animate({
      backgroundColor: '#f00'
    }, 1000);
  }).mouseout(function() {
    $(this).animate({
      backgroundColor: '#ccc'
    }, 1000);
  });
});

#row {

      margin-left: 20%;
    }


    #art {

      margin: 25px 2% 0 2%;
      width: 250px;
      height: 250px;
      border-radius: 50px;
      background-color: orange;
      display: inline-block;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col5" id="row">
  <div class="col1" id="art">Portfolio Piece #1</div>
  <div class="col1" id="art">Portfolio Piece #1</div>
  <div class="col1" id="art">Portfolio Piece #1</div>
</div>

Answer 1

Как я уже писал в комментариях выше id должен быть уникальным.

$(document).ready(function() {
  $(".art").mouseover(function() {
    $(this).animate({
      backgroundColor: '#f00'
    }, 1000);
  }).mouseout(function() {
    $(this).animate({
      backgroundColor: '#ccc'
    }, 1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col5" id="row">
  <div class="col1 art" id="art_1">Portfolio Piece #1</div>
  <div class="col1 art" id="art_2">Portfolio Piece #1</div>
  <div class="col1 art" id="art_3">Portfolio Piece #1</div>
</div>

демонстрация