title: pop and push the elements in the array based on click and non click of bootstrap cards in a web page?
body: <p>I am having 6 bootstrap cards in my web page where the details of the card are id and content.For example when I click the 1st card the details of the first card should be pushed into the array when I again click the 1st card the details of first card should be popped.
  My html code is:</p>
  
  <pre><code>&lt;div class="col-4" onclick="getGoal(1)"&gt;
      &lt;div class="card4 mt-3" id="room_1" style="width: 12rem; height:9rem;"&gt;
        &lt;center&gt;
          &lt;div class="card-body"&gt;
            &lt;p class="card-text mt-4" id="cont_1"&gt;&lt;b&gt;I am redecorating&lt;/b&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/center&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;div class="col-4" onclick="getGoal(2)"&gt;
      &lt;div class="card4 mt-3" id="room_2" style="width: 12rem; height:9rem;"&gt;
        &lt;center&gt;
          &lt;div class="card-body"&gt;
            &lt;p class="card-text mt-4" id="cont_2"&gt;&lt;b&gt;I am moving&lt;/b&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/center&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;div class="col-4" onclick="getGoal(3)"&gt;
      &lt;div class="card4 mt-3" id="room_3" style="width: 12rem; height:9rem;"&gt;
        &lt;center&gt;
          &lt;div class="card-body"&gt;
            &lt;p class="card-text mt-4" id="cont_3"&gt;&lt;b&gt;I need help with a layout&lt;/b&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/center&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;div class="col-4" onclick="getGoal(4)"&gt;
      &lt;div class="card4 mt-3" id="room_4" style="width: 12rem; height:9rem;"&gt;
        &lt;center&gt;
          &lt;div class="card-body"&gt;
            &lt;p class="card-text mt-4" id="cont_4"&gt;&lt;b&gt;I am looking for species&lt;/b&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/center&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;div class="col-4" onclick="getGoal(5)"&gt;
      &lt;div class="card4 mt-3" id="room_5" style="width: 12rem; height:9rem;"&gt;
        &lt;center&gt;
          &lt;div class="card-body"&gt;
            &lt;p class="card-text mt-4" id="cont_5"&gt;&lt;b&gt;I am moving in someone&lt;/b&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/center&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;div class="col-4" onclick="getGoal(6)"&gt;
      &lt;div class="card4 mt-3" id="room_6" style="width: 12rem; height:9rem;"&gt;
        &lt;center&gt;
          &lt;div class="card-body"&gt;
            &lt;p class="card-text mt-4" id="cont_6"&gt;&lt;b&gt;other&lt;/b&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/center&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My JS CODE IS</p>
  
  <pre><code>var goal = []
  function getGoal(id ,content){
    if (goal == []) {
      for(var i=0; i&lt;goal.length; i++){
        if(goal[i].id == id) {
          var index = goal.indexOf(goal[i])
          if (index !== -1) {
            goal.splice(index, 1);  
          }
        }else {
          var data = {id: id, content: $("#cont_"+id).text()}
          var x = JSON.stringify(data);
          goal.push(x)
        }
      }
    }else {
      var data = {id: id, content: $("#cont_"+id).text()}
      var x = JSON.stringify(data)
      goal.push(x)
      console.log(goal)
    } 
  }
  var storedNames = JSON.parse(localStorage.getItem("goal"))
  </code></pre>
  
  <p>By this jS code it is working so far is pushing the elements into the goal array when I again clicks the same card also pushing of elements is being done but not pop How do I achieve this?</p>