Hide and Show button by ID

Can you show some code here

and may on the ajax success function you can add hide() and show() function for same

@shakti Here's the code:

$("#btn-submit").click(function() {   //button id
                var appForm = $("#form");  //form id
                appForm.submit(function(e){
                    e.preventDefault();
                    var formData = appForm.serialize();
                    /*alert(formData);*/
                    $.ajax({
                        url:"{{ route('configurations.store') }}",
                        type:'POST',
                        data:formData,
                        dataType: 'JSON',
                        success:function(data){
                            $('#appModal').modal('hide');
                            $("#btn-add").hide();
                            $("#btn-edit").show();
                            document.getElementById('app-name').innerHTML = document.getElementById("app_name").value;
                            console.log(data);
                        },
                        error: function (data) {
                            console.log(data);
                        }
                    });
                });
                /*alert('Successfully Loaded');*/
            });

after I click the btn-submit, the btn-add will be hidden and btn-edit will be showed. Thank you

Yes exactly

i think you have already done in your code

@shakti but it still not working, only btn-add is working, the btn-edit still not showing, while the log not displaying any error. Which is why I got confused.

Okay can you please show me your html struture i.e. blade code

you might now have btn-edit id for you might have define it two time something like that

@shakti Here's the blade code:

<a href="#" class="btn btn-primary pull-right" id="btn-add" data-toggle="modal" data-target="#appModal" title="Add">
    <i class="fa fa-pencil"></i> Add
</a>
<a href="#" class="btn btn-warning pull-right" id="btn-edit" data-toggle="modal" data-target="#appeditModal" title="Edit">
    <i class="fa fa-edit"></i> Edit
</a>
@foreach ($config as $conf)
<div class="row">
    <div class="col-xs-8 col-md-2">
        <h3 class="profile-username"><strong>App Name:</strong></h3>
    </div>
    <div class="col-xs-12 col-md-9">
        <h3 class="profile-username">{{ $conf->app_name }}</h3>
    </div>
</div>
@endforeach 
<!-- Modal -->
<div class="modal fade" id="appModal" data-keyboard="false" data-backdrop="static" role="dialog" aria-labelledby="appModalLabel">
    <div class="modal-dialog" role="document">
    {{ Form::open(['id' => 'form']) }}
    <div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title" id="appModalLabel">
        <i class="fa fa-pencil"></i> Create App Name
        </h4>
    </div>
    <div class="modal-body">
        <h5 style="text-align:justify;">
        <strong>No App name described.</strong>
        </h5>
        <div class="form-group @if ($errors->has('app_name')) has-error @endif has-feedback">
        {{ Form::label('app_name', 'App Name', ['class' => 'control-label']) }}
        <span style="color:#dd4b39">*</span>
        {{ Form::text('app_name', null, ['class' => 'form-control', 'id' => 'app_name', 'placeholder' => 'App Name', 'required', 'autofocus']) }}
        <span class="fa fa-pencil form-control-feedback"></span>
        @if ($errors->has('app_name'))
            <span class="help-block">{{ $errors->first('app_name') }}
            </span>
        @endif
        </div>
    </div>
    <div class="modal-footer">
    <button type="submit" class="btn btn-primary" id="btn-submit">
        <i class="fa fa-save"></i> Save
    </button>
    </div>
    </div>
    {{ Form::close() }}
    </div>
</div>

For the javascript (ajax) code, as mentioned above, nothing changed. And for edit modal, still not available, I plan to make it after success on hide show button. Thank you for your time.

Edit: I make it like this because I need to only insert 1 record only.

As i can check you are not hiding btn-edit so how can that work it will always show

@devlanga I understand what you mean, but how can I do it? sorry, I'm still new in ajax/java/jquery things

<a href="#" class="btn btn-warning pull-right" id="btn-edit" data-toggle="modal" data-target="#appeditModal" title="Edit" style="display:none">
    <i class="fa fa-edit"></i> Edit
</a>

after that try to show this button in ajax

it might work in your case

@shakti thx for your time, it works now.