Bootstrap Snippet Dynamic Amount List using HTML Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br/>
<br/>
<div class="">
    <div class="col-lg-12">
        <div class="form-group listR_1" id="r1" style="display:none">
            <button name="close" class="btn btn-primary closeBtn">close</button>
            <div class="col-md-4">
                <input id="list_1" name="list_1" type="text" placeholder="placeholder" class="form-control input-md" readonly>
            </div>
        </div>
        <div class="form-group listR_2" id="r2" style="display:none">
            <button id="close" name="close" class="btn btn-primary closeBtn">close</button>
            <div class="col-md-4">
                <input id="list_2" name="list_2" type="text" placeholder="placeholder" class="form-control input-md" readonly>
            </div>
        </div>
        <div class="form-group listR_3" id="r3" style="display:none">
            <button id="close" name="close" class="btn btn-primary closeBtn">close</button>
            <div class="col-md-4">
                <input id="list_3" name="list_3" type="text" placeholder="placeholder" class="form-control input-md" readonly>
            </div>
        </div>
        <div class="form-group listR_4" id="r4" style="display:none">
            <button id="close" name="close" class="btn btn-primary closeBtn">close</button>
            <div class="col-md-4">
                <input id="list_4" name="list_4" type="text" placeholder="placeholder" class="form-control input-md" readonly>
            </div>
        </div>
    </div>
    <div class="col-lg-12 form-horizontal">
      
            <fieldset>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function () {
        flag = 1;
      $(".closeBtn").click(function () {
            $(this).parent().css('display', 'none');
            var PID = $(this).parent().attr('id').split(' ');
            if (PID == "r1")
            {
                $("#list_1").val(' ');
            }
            if (PID == "r2") {
                $("#list_2").val(' ');
            }
            if (PID == "r3") {
                $("#list_3").val(' ');
            }
            if (PID == "r4") {
                $("#list_4").val(' ');
            }
            $("#Add,#Name,#Class,#Degree").prop("disabled", false);
            flag--
            if(flag==4)
            {
                $("#Amount").val('930');
            }
            if (flag == 3) {
                $("#Amount").val('660');
            }
            if (flag == 2) {
                $("#Amount").val('360');
            }
            if (flag == 1) {
                $("#Amount").val('0.00');
            }
        });
        $('#Add').click(function () {
            var Name = $('#Name').val();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dynamic Amount List"
Bootstrap 3.3.0 Snippet by Nasir

Related: See More

Questions / Comments:

"Dynamic Amount List" Bootstrap 3.3.0 Snippet by Nasir

Related: See More

Questions / Comments:

"Dynamic Amount List"
Bootstrap 3.3.0 Snippet by Nasir