<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
  <button class="btn btn-readmore" data-toggle="modal" href="serv-cutting.html" data-target="#vividCutting">read more</button>
  <button class="btn btn-readmore" data-toggle="modal" href="serv-color.html" data-target="#vividColor">read more</button>
  <button class="btn btn-readmore" data-toggle="modal" href="serv-style.html" data-target="#vividStyle">read more</button>


  </body>
  
  <!-- Modal Services Cutting -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog"><div class="modal-content"></div>
        </div>
    </div>

</html>

// Code goes here
$(function () {
    $('button.btn-readmore').click(function () {
        var newId = $(this).attr('data-target').slice(1);
        console.log(newId);
        if ($('.modal').prop('id')) {
            $(this).removeProp('id');
        } else {
            $('.modal').prop('id', newId)
        }

    });
});

/* Styles go here */


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Remote file for Bootstrap Modal</title>
</head>
<body>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Vivid Cutting</h4>
</div>
<!-- /modal-header -->
<div class="modal-body">
    <p>Vivid Cutting</p>
</div>
<!-- /modal-body -->
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- /modal-footer -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Remote file for Bootstrap Modal</title>
</head>
<body>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Vivid Color</h4>
</div>
<!-- /modal-header -->
<div class="modal-body">
    <p>Vivid Color</p>
</div>
<!-- /modal-body -->
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- /modal-footer -->
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Remote file for Bootstrap Modal</title>
</head>
<body>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Vivid Cutting</h4>
</div>
<!-- /modal-header -->
<div class="modal-body">
    <p>Vivid Cutting</p>
</div>
<!-- /modal-body -->
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- /modal-footer -->
</body>
</html>