title: how to implement multiple items counter in javascript?
body: <p>I want to handle the count of multiple items with Js </p>
  
  <p>1) what I want is when clicking on plus or minus sign , the counter number next to it updates ;
  2) considering that by clicking on add room another room is added to the list and its title should change to for example in this case to (Room two); </p>
  
  <p>this is my js code</p>
  
  <pre><code> $(".Room-Plus-Btn").click(function () {
          Room_item=$(".Room").html()
          $(".Room-Counter-Items").append(Room_item)
      })
  </code></pre>
  
  <p>and this is my html </p>
  
  <pre><code>&lt;div class="Room-Counter-Hotel-pge py-3 pr-3 col-12"&gt;
  
  &lt;div class="Room-Indicator"&gt;
  
  &lt;/div&gt;
  &lt;div class="Room-Counter-Items"&gt;
      &lt;!--Room Item--&gt;
      &lt;div class="Room"&gt;
          &lt;div class="col-12 mt-1 mb-2"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-7"&gt;
                      &lt;p class="Room-Number"&gt; Room one&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-5"&gt;&lt;/div&gt;
                  &lt;div class="col-7 d-flex align-items-center"&gt;
                      &lt;span class="Room-Age"&gt;
                          adult
                      &lt;/span&gt;
                      &lt;span class="Room-Age-Range"&gt;
                      (more than 12)
                  &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="col-4 Room-Counter-Btns"&gt;
                      &lt;button class="Btn Room-Plus"&gt;
                          &lt;i class="fa text-grey fa-plus-circle"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                      &lt;span class="Room-Count"&gt;0&lt;/span&gt;
                      &lt;button class="Btn Room-Minus"&gt;
                          &lt;i class="fa text-grey fa-minus-circle"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-12 my-1"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-7 d-flex align-items-center"&gt;
                      &lt;span class="Room-Age"&gt;
                          kid
                      &lt;/span&gt;
                      &lt;span class="Room-Age-Range"&gt;
                      (0 to 12)
                      &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="col-4 Room-Counter-Btns"&gt;
                      &lt;button class="Btn Room-Plus"&gt;
                          &lt;i class="fa text-grey fa-plus-circle"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                      &lt;span class="Room-Count"&gt;0&lt;/span&gt;
                      &lt;button class="Btn Room-Minus"&gt;
                          &lt;i class="fa  text-grey fa-minus-circle"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr class="my-3 w-75"&gt;
  &lt;/div&gt;
  &lt;div class="col-12 text-center"&gt;
      &lt;button class="Room-Plus-Btn"&gt;add room&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>