title: How to push and pop the details into the array in javascript based on the selection of cards?
body: <p>I am having 6 bootstrap cards in my web page where every card consists of details like id and content. When I clicked the card the details of the card should be pushed into the array and when I clicked the same card the details should be popped from the array.
  My html page in django:</p>
  
  <blockquote>
    <p></p>
  </blockquote>
  
  <pre><code>&lt;div class="row"&gt;
      {% for j in goal %}   
      &lt;div class="col-4" onclick="getGoal({{j.id}})"&gt;
          &lt;div class="card4 mt-3" id="room_{{j.id}}" style="width: 12rem; height:9rem;"&gt;
              &lt;center&gt;
              &lt;div class="card-body"&gt;
                  &lt;p class="card-text mt-4" id="cont_{{j.id}}"&gt;&lt;b&gt;{{j.goal}}&lt;/b&gt;&lt;/p&gt;
              &lt;/center&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
  {% endfor %}
  </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)
          console.log(goal)
      } 
  }
  var storedNames = JSON.parse(localStorage.getItem("goal"))
  </code></pre>
  
  <p>Is the JS code correct for my requirement?</p>