JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://scrum3.palladian-sandbox.co.za/assets/js/bootbox4.2.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
 <div class='row'>
   <div class='col-md-12'><h3><a href='/index.php?page=View Idea&module=ideas&file_name=view_idea'>First</a></h3>
   </div>
</div>
<div class='row' style='margin-top: 10px'>
  <div class='col-md-12'><a href='#' class='comments' data-idea='1'>12 Comments</a></div>
</div>
<div class='row'>
   <div class='col-md-4'>
     <a href='#' class='addCommentBtn' data-idea='1'><i class='fa fa-comment-o'></i> Add a comment</a>
   </div>
</div>
<div class='row' style='display: none; margin-top: 10px' id='comment_1'>
            <div class='col-md-12'>
                <div class='block'>
                    <div class='blockTitle'>Add a Comment</div>
                    <div class='blockContent'>
                        <form id='addComment1' method='post'>
                            <input type='hidden' name='idea_id' value='1'>
                            <input type='hidden' name='user_id' value='1'>
                            <div class='form-group'>
                                <textarea class='form-control' rows='10' name='comment'></textarea>
                            </div>
                            <div style='float: right'>
                                <button type='submit' class='btn btn-success submitCommentBtn' data-idea='1'>Submit</button>
                                <button type='button' class='btn btn-default cancelCommentBtn' data-idea='1'>Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

         <div class='row' style='border-bottom: 1px solid #666; margin-top: 10px; margin-bottom: 10px'></div>
   ...

JavaScript

/**
 * Created by Sigal on 2014/09/26.
 */
$(function() {
    $('.addCommentBtn').on('click', function() {
        var idea_id = $(this).data('idea');
        $('#comment_'+idea_id).slideDown();
        return false;
    });

    $('.cancelCommentBtn').on('click', function() {
        var idea_id = $(this).data('idea');
        $('#addComment'+idea_id).bootstrapValidator();
        $('#addComment'+idea_id)[0].reset();
        $('#addComment'+idea_id).data('bootstrapValidator').resetForm();
        $('#comment_'+idea_id).slideUp();
        return false;
    });

    $('.closeCommentsBtn').on('click', function() {
        $(this).parent().parent().parent().parent().slideUp();
        return false;
    });

    $('.submitCommentBtn').on('click', function() {
        var idea_id = $(this).data('idea');

        $('#addComment'+idea_id).bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                comment: {
                    validators: {
                        notEmpty: { message: "Please enter your comment" }
                    }
                }
            }
        }).on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            // var bv = $form.data('bootstrapValidator');
alert('in');
            $('#addComment'+idea_id)[0].reset();
            $('#addComment'+idea_id).data('bootstrapValidator').resetForm();
            $('#comment_'+idea_id).slideUp();
            // Use Ajax to submit form data;
            /*$('#addComment'+idea_id).ajaxSubmit({
                url: '/modules/ideas/ajax/save_comment.ajax.php',
                beforeSubmit: function() {
                   ...