Question: Using Jquery im trying to place input text box over label when i click on edit button and when i click on cancel button im changing it from input to label

MyCode

```
<label id="labelId" class="labelclass">label</label>
<input value="input" type="text" class="inputclass" id="inputId" style="display:none;"/>
<button id="edit">edit</button>
<button id="cancel">cancel</button>

<script type="text/javascript">
    $(document).click(function(){
        $('#edit').addClass('inputclass').removeClass('labelclass');
        $('#cancel').addClass('labelclass').removeClass('inputclass');
    });
</script>

```

Any Help is Appreciated Thanks!

Answer: 
You need to bind `click` event on buttons instead of document. Then as your input, labels and buttons are at same level so you can use `.siblings(classname)` and just hide/show them.

Try this:

```js
$(document).ready(function() {
  $('#edit').click(function() {
    $(this).siblings('.labelclass').hide();
    $(this).siblings('.inputclass').show();
  });
  $('#cancel').click(function() {
    $(this).siblings('.labelclass').show();
    $(this).siblings('.inputclass').hide();
  });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="labelId" class="labelclass">label</label>
<input value="input" type="text" class="inputclass" id="inputId" style="display:none;" />
<br/>
<button id="edit">edit</button>
<button id="cancel">cancel</button>
```
You could use following logic to make your code more user freindly imho:

```js
$(document).ready(function() {
  $('#edit, #cancel').click(function() {
    $('#edit, #cancel').prop('disabled', function(){return !this.disabled});
    $(this).siblings('.labelclass, .inputclass').toggle();
  });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="labelId" class="labelclass">label</label>
<input value="input" type="text" class="inputclass" id="inputId" style="display:none;" />
<br/>
<button id="edit">edit</button>
<button id="cancel" disabled>cancel</button>
```