Set a reset button to clear a specific single input of type text

Question

I have the following:

<div id="section1">
 <label> Label 1 </label>
 <br>
 <input type="text" id="input_section1">
 <button type="reset" class="clear"></button>
</div>

This is how the html must remain structured. I have other divs on the page that are the same as the above (called #section2, #section3 etc), and none of the inputs are within a form.

So what I want is the button to reset the specific input it is associated with; in the case above, the input '#input_section1'.

At the moment when I click the reset button it is clearing every input on the page.

Answer 1

a simple solution:

<input type="button" onClick="document.getElementById('input_secion1').value='';">

This should do what you are asking for.

Answer 2

You can use the following jquery code using .siblings() :

$(document).on('click','.clear',function(){
    $(this).siblings( "input" ).val('');
});

This will find the input type sibling of the current clicked element and reset it.

See the fiddle