Select only one element using the css class
Example HTML structure:
- <div class="status-header">
- <div class="status-avatar">
- @include('layouts.partials.avatar', ['user' => $status->user])
- </div>
- <div class="status-data">
- <strong class="status-username">
- {{ link_to_route('profile_path', $status->user->username, $status->user->username) }}
- </strong>
- <div class="status-time">
- {{ $status->present()->timeSincePublished() }}
- </div>
- </div>
- </div>
- <div class="buttons status-buttons">
- <button class="status-btn follow-btn" data-expand="#follow">
- Follow
- </button>
- <button class="status-btn comment-btn" data-expand="#comment" id="comment">
- Comment
- </button>
- </div>
- <a class="comments-count" data-expand="" href="#">
- {{ $status->present()->commentsCount() }}
- </a>
- <div class="comment-submit" >
- {{ Form::open(['route' => ['comment_path', $status->id], 'class' => 'comments-submit-form']) }}
- {{ Form::hidden('status_id', $status->id) }}
- <span class="coll-handle" style="display: inline-block"></span>
- <input name="body" class="comment-input" placeholder="Your comment goes here.">
- {{ Form::close() }}
- </div>
- <p class="rec">
- {{ $status->body }}
- </p>
- @if ($comments = $status->comments)
- <div class="">
- <div class="">
- @foreach ($comments as $comment)
- @include('statuses.partials.comment')
- @endforeach
- </div>
- </div>
- @endif
This structure gets used for every status. How can I focus/select only the .comment-input of the status I click on .comment-btn? When I would insert the css class name, it would stop working when I have more than one status.
- $('.comment-btn').click(function() {
- setTimeout( function() {
- $('').focus();
- }, 1000);
- });