JSFiddle - React, Tailwind, and code Playground

by soljohnston777

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="add_more_asset_numbers_edit" /></div>


<div id="edit_more_asset_numbers_modal" class="modal fade" role="dialog">
<form action="" method="" class="">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Asset</h4>
            </div>
            <div class="modal-body">
                <h3>New Asset Name</h3>
                <p><input type="text" class="form-control" name="editAssetName" id="editAssetName" value="" placeholder="New Asset Name" /></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary editAssetName_submit"><i class="fa fa-check"></i> Change Asset Name</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
            </div>
        </div>
    </div>
    </form>
</div>

JavaScript

var arr = [
	   '1',  
	   '2',   
	   '3',   
	   '4'
	  
	];

	$.each(arr, function (index, value) {
	  // alert(value);
		$("#add_more_asset_numbers_edit").append("<input type='text' name='' value='"+ value+"' id='input_"+ value+"' disabled /><button type='button' id='"+ value+"_"+ value+"_1' class='btn btn-warning edit_more_assets'>Edit</button><button type='button' id='"+ value+"_"+ value+"' class='btn btn-danger remove_more_assets'>Remove</button><br id='"+ value+"_2'>");
								
		
	});
  $(".edit_more_assets").on("click", function(){
			var id1 = $(this).prop("id");
			alert(id1);
			return false;

		});
		$(".remove_more_assets").on("click", function(){
				var id1 = $(this).prop("id");
				alert(id1)
				return false;
		});
  // on close clear data
  $('#modal1').on('hidden.bs.modal', function (e) {
  $(this)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

//on close with close button clear data
$('[data-dismiss=modal]').on('click', function (e) {
    var $t = $(this),
        target = $t[0].href || $t.data("target") || $t.parents('.modal') || [];

  $(target)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})