I have a problem. I want to edit the blocks directly from the main page of the admin panel, more precisely when the user (admin) clicks on the block, the block is converted into an editor (as in the screenshot). And then there is a problem because when I click on one, everything disappears and one form appears. How can this be done so that after a click only one block is changed?
var autoCard = $(".auto__card"); var autoCardRed = $(".red_tekst") $(autoCard).on("click", function(e) { $(this).fadeOut(); }) $("i").on("click", function(e) { $(autoCardRed).fadeIn(); autoCardRed.val(''); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-4"> <div class="wrapper-block"> <div class="auto__card"> <div class="hover-block"> <i class="fas fa-plus"></i> <!-- Тут находится редактор --> </div> <div class="img-block"> <img src="img/auto.jpg" alt=""> </div> <!-- /.img-block --> <div class="describe-block"> <h5>Audi</h5> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio aliquam iste ab, delectus, ducimus qui iusto id culpa, eligendi ipsam animi cum dolorum neque commodi quia laborum tempore voluptatem. Repellat.</p> <p class="cena">Cena: 1500euro</p> </div> <!-- /.describe-block --> </div> <!-- /.auto__card --> <div class="auto__card-red"> <i class="fas fa-times"></i> <form action="admin.php" method="post"> <div class="img-block"> <input type="file" name="img"> </div> <!-- /.img-block --> <div class="describe-block"> <input class="red_tekst" type="text" placeholder="Wpisz nazwę samochodu" name="auto-nazwa"> <textarea class="red_tekst" id="" cols="30" rows="10" style="resize: none" placeholder="Wpisz opis" name="opis"></textarea> <input class="red_tekst" type="text" placeholder="Wpisz cene w zł" name="cena"> <input class="red_submit" type="submit" value="Zapisz"> </div> <!-- /.describe-block --> </form> </div> <!-- /.auto__card --> </div> <!-- /.wrapper-block --> </div> <!-- /.col-md-4 --> 
