function not working, changing attribute and adding/removing classes jquery

Question

on click of an icon I am changing the background image url by adding and removing classes. i am changing the id so on the second click the different id adds and removes different classes.

however this is not working, can someone please tell me why??

$("#glass1").click(function() {
  $( "#glass1").addClass("wineGlassFull1");
  $( "#glass1").removeClass("wineGlass1");
  $("#glass1").attr("id", "glass1full");
});

$("#glass1full").click(function() {
  $( "#glass1").removeClass("wineGlassFull1");
  $( "#glass1").addClass("wineGlass1");
  $("#glass1full").attr("id", "glass1");
});

<div class="row animated subscribe1 fadeIn">
  <div class="col-md-8 col-sm-12 sub71">
     <br><br>
     <p class="titleDiv blood centered moon twenty22">
     Select&nbsp;Your&nbsp;Wine&nbsp;Preferences
     </p>
     <br><br><br>
     <div class="row marginBottom150">
        <div class="wineGlass1 col-md-3 col-sm-6" id="glass1">
           <p class="wineName">pale&nbsp;garnet</p>
        </div>
        <div class="wineGlass2 col-md-3 col-sm-6">
           <p class="wineName">medium&nbsp;red</p>
        </div>
        <div class="wineGlass3 col-md-3 col-sm-6">
         <p class="wineName">deep&nbsp;purple</p>
        </div>
     </div>
     <div class="row">
        <div class="wineGlass4 col-md-3 col-sm-6">
           <p class="wineName">pale&nbsp;platinum</p>
        </div>
        <div class="wineGlass5 col-md-3 col-sm-6">
           <p class="wineName">medium&nbsp;lemon</p>
        </div>
        <div class="wineGlass6 col-md-3 col-sm-6">
           <p class="wineName">deep&nbsp;gold</p>
        </div>
     </div>

Answer 1

Basic you code switch between 2 classes, so just use the follow code:

$("#glass1").click(function() {
  $("#glass1").toggleClass("wineGlassFull1 wineGlass1");
});

This should create the same as you want.

demo

$("#glass1").click(function() {
  $("#glass1").toggleClass("wineGlassFull1 wineGlass1");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row animated subscribe1 fadeIn">
  <div class="col-md-8 col-sm-12 sub71">
    <br><br>
    <p class="titleDiv blood centered moon twenty22">
      Select&nbsp;Your&nbsp;Wine&nbsp;Preferences
    </p>
    <br><br><br>
    <div class="row marginBottom150">
      <div class="wineGlass1 col-md-3 col-sm-6" id="glass1">
        <p class="wineName">pale&nbsp;garnet</p>
      </div>
      <div class="wineGlass2 col-md-3 col-sm-6">
        <p class="wineName">medium&nbsp;red</p>
      </div>
      <div class="wineGlass3 col-md-3 col-sm-6">
        <p class="wineName">deep&nbsp;purple</p>
      </div>
    </div>
    <div class="row">
      <div class="wineGlass4 col-md-3 col-sm-6">
        <p class="wineName">pale&nbsp;platinum</p>
      </div>
      <div class="wineGlass5 col-md-3 col-sm-6">
        <p class="wineName">medium&nbsp;lemon</p>
      </div>
      <div class="wineGlass6 col-md-3 col-sm-6">
        <p class="wineName">deep&nbsp;gold</p>
      </div>
    </div>

I guess the same should happen for the rest of them.

updated demo

$("div[class^=wineGlass]").click(function() {
  $(this).toggleClass("wineGlassFull wineGlass");
});

.wineGlassFull {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row animated subscribe1 fadeIn">
  <div class="col-md-8 col-sm-12 sub71">
    <br><br>
    <p class="titleDiv blood centered moon twenty22">
      Select&nbsp;Your&nbsp;Wine&nbsp;Preferences
    </p>
    <br><br><br>
    <div class="row marginBottom150">
      <div class="wineGlass1 col-md-3 col-sm-6" id="glass1">
        <p class="wineName">pale&nbsp;garnet</p>
      </div>
      <div class="wineGlass2 col-md-3 col-sm-6">
        <p class="wineName">medium&nbsp;red</p>
      </div>
      <div class="wineGlass3 col-md-3 col-sm-6">
        <p class="wineName">deep&nbsp;purple</p>
      </div>
    </div>
    <div class="row">
      <div class="wineGlass4 col-md-3 col-sm-6">
        <p class="wineName">pale&nbsp;platinum</p>
      </div>
      <div class="wineGlass5 col-md-3 col-sm-6">
        <p class="wineName">medium&nbsp;lemon</p>
      </div>
      <div class="wineGlass6 col-md-3 col-sm-6">
        <p class="wineName">deep&nbsp;gold</p>
      </div>
    </div>