JSFiddle - React, Tailwind, and code Playground

by Mohamed Rias

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div ng-app="coverEditor">
<div class="feature box" id="featureBox" ng-controller="featureBox">
    <div class="item">
        <div class="edit">
            <div class="form-elements">
                <div class="element">
                    <div class="select-box" id="set-article">
                        <div class="element current" data-value="11">Test Article</div>
                    </div>
                </div>
                <div class="element">
                    <input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" />
                </div>
                ...
            </div>
        </div>

        <div class="item-content featureBackColor">
            <h1>{{article.featureTitle}}</h1>
        </div>

    </div>
</div>
</div>

JavaScript

var coverEditor = angular.module("coverEditor",[]);

coverEditor.controller('featureBox',function($scope){
	$scope.article = {};
	
	//set artcle
	jQuery('#set-article .element').click(function(){
		var articleElement = jQuery(this);
		var articleTitle = articleElement.text();
		//var scope = angular.element(document.getElementById("featureBox")).scope();
		
		jQuery('#theme-layout .element').removeClass('current');
		articleElement.addClass('current');
        // 
        $scope.article.featureTitle = articleTitle;
		articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
        $scope.$apply();
	});
});