remove readonly attribute using jquery - php

Question

<script type="text/javascript">
$('.show_edit').click(function() {
$(this).hide();
$(this).siblings('.edit_faq').show();
$(this).parent().prev().find('.remove_att').removeAttr( "readonly" ); // this working perfect
$(this).next().find('.remove_text').removeAttr( "readonly" ); // this is not working
});
</script>
<?php foreach ($faq as $faq): ?>
<div class="form-group">
<label class="col-sm-2 control-label">Question : </label>
<div class="col-sm-8">
<input type="text" id="question" class="form-control remove_att" value="<?php echo $faq['faq_question'] ?>" placeholder="Enter the question" readonly="readonly" required="">
</div>
<div class="col-sm-2" class="edit_all">
<button type="button" class="btn btn-warning btn-sm show_edit" data-toggle="tooltip" data-placement="bottom" title="Edit"><i class="fa fa-edit"></i></button>
<button type="button" id="<?php echo $faq['faq_id'] ?>" class="btn btn-success btn-sm edit_faq" data-toggle="tooltip" data-placement="bottom" title="Save" style="display: none"><i class="fa fa-floppy-o" ></i></button>
<button type="button" class="btn btn-danger btn-sm delete_faq" id="<?php echo $faq['faq_id'] ?>" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Answer : </label>
<div class="col-sm-8">
<textarea class="form-control remove_text" id="answer" rows="5" placeholder="Type your answer..." required="required" readonly ><?php echo $faq['faq_answer'] ?></textarea>
</div>
</div>
<?php endforeach; ?>
i'm doing inline edit using save and edit button with the help of jquery.
when i click on edit button input type="text" and textarea remove the readonly attribute. where input type="text" is working correctly,now i want to remove the readonly from textarea how to do this, any help would be appreciated

Answer 1

Your .show_edit button wrapped in 2 divs:
div.edit_all and div.form-group
And, your textarea is located in the next div.form-group,
So, try this:
$('.show_edit').click(function() {
$(this).hide();
$(this).siblings('.edit_faq').show();
$(this).parent().prev().find('.remove_att').removeAttr( "readonly" );
$(this).closest('.form-group').next().find('.remove_text').removeAttr( "readonly" );
// ^find the closest div.form-group parent
});

Answer 2

You can find parent of .show_edit then again find its parent.
Your textarea is present in next div where we find .remove_text class for remove readonly
so try this :
<script type="text/javascript">
jQuery(document).ready(function(){
$('.show_edit').click(function() {
$(this).hide();
$(this).siblings('.edit_faq').show();
$(this).parent().prev().find('.remove_att').removeAttr( "readonly" );
$(this).parent().parent().next().find('.remove_text').removeAttr( "readonly" );
})
});
</script>