I have several blocks in the form, I need to move the button to it by clicking on the block. It is necessary that the button be moved to each label within its parent .check

Here is an example:

.check { width: 200px; height: 200px; border: 1px solid #000; } .check label { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="check"> <label for="check-1"> <input id="check-1" class="element-checkbox" name="check-1" value="Motul" type="checkbox"> <span>Motul</span> </label> <label for="check-2"> <input id="check-2" class="element-checkbox" name="check-2" value="Motul" type="checkbox"> <span>Motul</span> </label> <label for="check-3"> <input id="check-3" class="element-checkbox" name="check-3" value="Motul" type="checkbox"> <span>Motul</span> </label> <button class="box-button">Показать</button> </div> <div class="check"> <label for="check-4"> <input id="check-4" class="element-checkbox" name="check-4" value="Motul" type="checkbox"> <span>Motul</span> </label> <label for="check-5"> <input id="check-5" class="element-checkbox" name="check-5" value="Motul" type="checkbox"> <span>Motul</span> </label> <label for="check-6"> <input id="check-6" class="element-checkbox" name="check-6" value="Motul" type="checkbox"> <span>Motul</span> </label> <button class="box-button">Показать</button> </div> <script> $(".check label").click(function() { $('.box-button').appendTo(this); }); </script>

    1 answer 1

    parent() - we are looking for a parent

    find() - looking for the desired item inside the parent

     $(".check label").click(function() { $(this).parent('.check').find('.box-button').appendTo(this); }); 
     .check { width: 200px; height: 200px; border: 1px solid #000; } .check label { display: block; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="check"> <label for="check-1"> <input id="check-1" class="element-checkbox" name="check-1" value="Motul" type="checkbox"> <span>Motul</span> </label> <label for="check-2"> <input id="check-2" class="element-checkbox" name="check-2" value="Motul" type="checkbox"> <span>Motul</span> </label> <label for="check-3"> <input id="check-3" class="element-checkbox" name="check-3" value="Motul" type="checkbox"> <span>Motul</span> </label> <button class="box-button">Показать</button> </div> <div class="check"> <label for="check-4"> <input id="check-4" class="element-checkbox" name="check-4" value="Motul" type="checkbox"> <span>Motul</span> </label> <label for="check-5"> <input id="check-5" class="element-checkbox" name="check-5" value="Motul" type="checkbox"> <span>Motul</span> </label> <label for="check-6"> <input id="check-6" class="element-checkbox" name="check-6" value="Motul" type="checkbox"> <span>Motul</span> </label> <button class="box-button">Показать</button> </div>