title: Select only one element, not all element - jQuery
body: <p>I have 3-4 checkbox (<code>btnA</code>/<code>btnB</code> etc.) and they except first checkbox all other checkbox having <code>hidechktext</code> class. I also have 3-4 images in separate <code>div</code> and except one they all have <code>hidechktext</code> class.</p>
  
  <p>I want when I click the checkbox(<code>btnA</code>) it will change the checkbox to <code>btnB</code> as well as change the <code>img1</code> to <code>img2</code>. I can change the checkbox... Meaning when I click first checkbox(<code>btnA</code>), it adds the class <code>hidechktext</code> to <code>btnA</code> and removes the class <code>hidechktext</code> from <code>btnB</code> so that it can be seen.</p>
  
  <p>My problem is I can not change the picture, the checkbox are replaced by next one...<br>
  But in case of image it adds <code>hidechktext</code> to all images and that's why after clicking the checkbox no image is showing.</p>
  
  <p>Please help me doing that just a small problem it is.</p>
  
  <p><strong>HTML codes</strong></p>
  
  <pre><code>&lt;div class="col-lg-6 col-md-6 col-sm-12 col-12 halftop" align="center"&gt;
    &lt;div class="card" style="width:100%;" align="center"&gt;
      &lt;!---Image type animation--&gt; 
      &lt;div class="imgall"&gt;
        &lt;figure class="imgmain"&gt;
          &lt;img src="img/pane/pane1.jpg" alt=""&gt;
        &lt;/figure&gt;
        &lt;figure class="imgmain hidechktext"&gt;
          &lt;img src="img/pane/pane2.jpg" alt=""&gt;
        &lt;/figure&gt;
        &lt;figure class="imgmain hidechktext"&gt;
          &lt;img src="img/pane/pane3.jpg" alt=""&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
      &lt;!---Image type animation--&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!---First like button--&gt;
  &lt;div class="col-2 mobileview halftoplike text-center"&gt;
    &lt;div class="imgtext"&gt;      
      &lt;a class="nextimgs"&gt;
        &lt;input class="hidecheck" type="checkbox" name="imganimate" value="img1" id="chkimg1"&gt;
        &lt;label for="chkimg1"&gt;
          &lt;p&gt; 
            &lt;i class="fa fa-thumbs-o-up fa-3x"&gt;&lt;/i&gt; &lt;br/&gt;
            BtnA
          &lt;/p&gt; 
        &lt;/label&gt; 
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="imgtext hidechktext"&gt;      
      &lt;a class="nextimgs"&gt;
        &lt;input class="hidecheck" type="checkbox" name="imganimate" value="img2" id="chkimg2"&gt;
        &lt;label for="chkimg2"&gt;
          &lt;p&gt; 
            &lt;i class="fa fa-thumbs-o-up fa-3x"&gt;&lt;/i&gt; &lt;br/&gt;
            BtnB
          &lt;/p&gt; 
        &lt;/label&gt; 
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="imgtext hidechktext"&gt;      
      &lt;a class="nextimgs"&gt;
        &lt;input class="hidecheck" type="checkbox" name="imganimate" value="img3" id="chkimg3"&gt;
        &lt;label for="chkimg3"&gt;
          &lt;p&gt; 
            &lt;i class="fa fa-thumbs-o-up fa-3x"&gt;&lt;/i&gt; &lt;br/&gt;
            BtnC
          &lt;/p&gt; 
        &lt;/label&gt; 
      &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS code</strong></p>
  
  <pre><code>.hidechktext{
    opacity: 0;
    display: none;
  }
  </code></pre>
  
  <p><strong>jQuery code</strong></p>
  
  <pre><code>//for checkbox btn change
  $('.fa-thumbs-o-up').on('click', function() {
    var LikeC = $('.imgtext').last();
    var LikeA = $('.imgtext').first();
    if (!LikeC.hasClass("hidechktext")) {
      LikeA.removeClass('hidechktext');
    }
    $(this).siblings().parents('.imgtext').next().removeClass('hidechktext');
    $(this).parents('.imgtext').addClass('hidechktext');
  });
  
  //for image change    
  
  $('.fa-thumbs-o-up').on('click', function() {
    $('.imgall').children().siblings('.imgmain:first').removeClass('hidechktext'); 
    $('.imgmain').prepend().addClass('hidechktext');
  });
  </code></pre>
  
  <p>The problem is the image is not replacing with the next image but the btn is replacing .</p>